javascript - Hur delar man värde från ett js-objekt till en sass-variabel i react-js?

Jag försöker ändra mitt applikationstema färger dynamiskt. Jag vill få ett objekt från servern som har värdena på färgerna via JavaScript och sedan överföra dessa värden till SASS-variabler.

Jag hittade många artiklar om detta men inget fungerade för mig, nedan är några av dem:

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-importer

Finns det ett sätt att importera variabler från JavaScript till Sass eller tvärtom?

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

Svar #1

Med JavaScript kan du inte ändra värdet på SCSS-filer eftersom SCSS kompileras till CSS på servern och sedan skickas till klienten där JavaScript körs.

Du kan dock uppnå det via CSS-variabler (mer här). Du kan använda CSS-variabler med ett standardvärde och sedan ändra värdet på variabeln via JS.

Svar #2

Jag föreslår att du använder inline-styling för den där temafärgen

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

Du kan också använda ett bibliotek som styled components som låter dig skicka props direkt till stilar