Я пытаюсь передать переменную «ширину» компоненту, используя стилизованные компоненты. Значение «ширины» зависит от положения мыши. Передача его непосредственно в буквальную строку приводит к тому, что стилизованные компоненты создают новый класс для каждого движения мыши, которое вызывает предупреждение.
Чтобы решить эту проблему, я пытаюсь использовать метод .attrs для передачи переменной style в компонент, но я не могу понять, как передать это свойство css компоненту.
Я пробовал:
const StyledComponent = styled.div.attrs((props) => (
{
style: {
fontVariationSettings: `wdth: ${props.width})`,
},
})
)``;
Но React не распознает это как допустимое свойство для передачи в CSS. Как обойтись?