Динамическая вставка классов SCSS с помощью React

Question

Основной вопрос о передовых методах динамической вставки классов SASS с помощью React.

У меня есть компонент React с двумя подпорками: componentId и color.Компоненты отображаются в виде списка.Каждый раз, когда они отображаются, я хочу, чтобы они устанавливали цвет фона CSS компонента как this.props.backgroundColor.

Я понимаю, что могу делать это с помощью встроенных стилей, но это обычно вызывает недовольство из-за сложностиподдерживая это.В настоящее время у меня есть файл SCSS с несколькими классами.

Как можно динамически добавить класс SCSS с именем класса this.props.componentId и цветом this.props.backgroundColor?

Например, если компонент имел this.props как

componentId: list-item-123456789
color: #00FFFF

Как добавить из компонента реагирования следующий класс SCSS в мой файл style.scss?

.list-item-123456789 {
    background-color: #00FFFF;
}

Это работа для стилевых компонентов?Является ли это одним из тех случаев, когда встроенные стили, вероятно, являются лучшей практикой для работы?Мне неприятно делать это только из того, что я читал, но я не уверен, как подойти к вышеупомянутому решению.

Answer 1

Встроенные стили - это не то же самое, что просто установка класса для элемента, который вы можете сделать, если собираетесь фактически вручную создать все эти классы стилей.

Просто выполните

<li className={{this.props.componentId}}>Some Item </li>

Убедитесь, что класс SASS является глобальным или находится в области действия этого компонента.

Answer 2

Как вы уже догадались, это будет работа для стилизованных компонентов или встроенных стилей.Когда ваше приложение React компилируется, все эти файлы SASS преобразуются в стандартный CSS через Webpack (я полагаю).Таким образом, после того как ваше приложение было упаковано и развернуто, ваши SASS-файлы становятся избыточными.