Can "font-variation-settings" be used in the styled-components .attrs method?

0
votes

I'm trying to pass a variable "width" to a component using styled components. The value of "width" is a function of the mouse position. Passing it directly into the literal string causes styled-components to create a new class for every mouse movement, which throws a warning.

To resolve it, I'm trying to use the .attrs method to pass a variable style object to the component, but I can't work out how to pass this css property to the component.

I tried:

const  StyledComponent = styled.div.attrs((props) => (
  {
    style: {
      fontVariationSettings: `wdth: ${props.width})`,
    },
  })
)``;

But React doesn't recognise this as a valid property to pass into CSS. Any way around it?

1
javascriptcssreactjsstyled-components

1 Answers

0
votes

Got it. Typical that it's always straight after posting a question after spending hours trying different stuff. Rather than using font-variation-settings, I can use the individual properties. Width becomes font-stretch.

So what I am looking for is

const  StyledComponent = styled.div.attrs((props) => (
  {
    style: {
      fontStretch: `wdth: ${props.width})`,
    },
  })
)``;