Как вставить значение из react компонента в класс tailwind css
В моем приложении планируется смена цветовой темы. Темы хранятся в виде js объекта и импортируются в компонент react. Я делаю кнопки в шапке приложения из svg картинок, вставленных прямо в код. Svg вставляю напрямую, чтобы я мог вставлять цвет заливки и обводки прямо из объекта текущей темы, например: style={{color: theme.accent}.
Для стилизации использую tailwind css и у меня не получается вставить значение из javascript внутрь класса. Точнее значение подставляется, и это видно в инспекторе, но стили не применяются.
Как я вставляю значение:
<svg className={`hover:[&>path]:fill-[${theme.accent}]`} </svg>
Использовать обычные инлайн-стили не получится, потому что в них нельзя использовать псевдоклассы. А цвет менять мне нужно при наведении, и значение хранится именно в javascript.
В инспекторе видно, что код цвета вставился, но стили не применяются: иллюстрация
Если я меняю значение из объекта на обычную строку, то все работает. Пример подставленного значения: иллюстрация
Если это невозможно реализовать таким образом, то какая альтернатива для решения моей задачи самая простая?
Ответы (1 шт):
В tailwind класс нельзя вставить значение из javascript, но можно вставить свою css переменную.
Чтобы решить эту задачу нужно:
В инлайн стилях создать css переменную с значением из js.
<svg style={{'--accent-color': theme.accent}}>В tailwind класс вставить css переменную.
<svg className={
hover:[&>path]:fill-[var(--accent-color)]}>