Можно ли использовать «параметры-вариации-шрифта» в методе styled-components .attrs?

Question

Я пытаюсь передать переменную «ширину» компоненту, используя стилизованные компоненты. Значение «ширины» зависит от положения мыши. Передача его непосредственно в буквальную строку приводит к тому, что стилизованные компоненты создают новый класс для каждого движения мыши, которое вызывает предупреждение.

Чтобы решить эту проблему, я пытаюсь использовать метод .attrs для передачи переменной style в компонент, но я не могу понять, как передать это свойство css компоненту.

Я пробовал:

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

Но React не распознает это как допустимое свойство для передачи в CSS. Как обойтись?

Answer 1

Понятно. Как правило, это всегда происходит сразу после публикации вопроса, когда вы часами пробуете разные вещи. Вместо использования настроек-вариантов-шрифтов я могу использовать отдельные свойства. Ширина становится font-stretch.

Итак, я ищу

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