javascript - Bagaimana cara membagikan nilai dari objek js ke variabel sass di react-js?

Saya mencoba untuk mengubah warna tema aplikasi saya secara dinamis. Saya ingin mendapatkan objek dari server yang memiliki nilai warna menggunakan JavaScript, kemudian meneruskan nilai-nilai ini ke variabel sass.

Saya menemukan banyak artikel tentang ini tetapi tidak ada yang berhasil bagi saya, berikut beberapa di antaranya:

https://itnext.io/membagikan-variabel-antara-js-dan-sass-menggunakan-webpack-sass-loader-713f51fa7fa0

https://github.com/pmowrer/node-sass-json-importer#node-sass-json-importer

Apakah ada cara untuk mengimpor variabel dari javascript ke sass atau sebaliknya?

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

Jawaban #1

Dengan menggunakan JavaScript, Anda tidak dapat mengubah nilai file SCSS karena SCSS dikompilasi menjadi CSS di server dan kemudian dikirim ke klien tempat JavaScript dijalankan.

Namun Anda dapat mencapainya melalui variabel CSS (lebih lanjut di sini). Anda bisa menggunakan variabel CSS dengan nilai default dan kemudian mengubah nilai variabel tersebut melalui JS.

Jawaban #2

Saya menyarankan Anda untuk menggunakan styling langsung untuk warna tema itu

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

Anda juga bisa menggunakan library seperti styled components yang memungkinkan Anda mengirim props langsung ke dalam style