Как разделить значение от js объекта до переменной sass в реакции- js?

Question

Я пытаюсь динамически менять цвета темы своего приложения. Я хочу получить объект с сервера, который имеет значения цветов, на JavaScript, а затем передать эти значения переменным sass.

Я нашел много статей об этом, но у меня ничего не получалось, кроме некоторых из них:

https://itnext.io/sharing-variables-between-js-and-sass-using-webpack-sass-loader-713f51fa7fa0

https://github.com/pmowrer/node-sass-json-importer#node -sass- json -импортер

Есть ли способ импортировать переменные из javascript в sass или наоборот?

https://frontend-cookbook.ack.ee/pages/implementation/SharingVariables.html

Answer 1

Я предлагаю вам использовать встроенный стиль для этого цвета темы

<SomeComponent className={this.state.themeColor === 'black'? 'classDarkMode' : 'classNormalMode'} />

Вы также можете использовать lib как стилизованные компоненты , которые позволяют передавать реквизиты непосредственно в стили

Answer 2

Используя javascript, вы не можете изменить значение s css файлов, поскольку s css скомпилируется в css на сервере и затем отправляется клиенту, где выполняется javascript.

Однако вы можете достичь этого с помощью css переменных ( больше здесь ). Вы можете использовать css переменные со значением по умолчанию, а затем изменить значение переменной с помощью JS.