如何将 js 对象的值共享到 react-js 中的 sass 变量？

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

Is there a way to import variables from javascript to sass or vice versa?

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

Answer 1

我建议您对该主题颜色使用内联样式

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

你也可以使用像 styled components 这样的 lib，它允许你将 props 直接传递到样式中

Answer 2

使用javascript你不能改变scss文件的值，因为scss在服务器被编译成css然后发送到执行javascript的客户端。

但是，您可以通过 css 变量 (more here) 来实现。 您可以使用具有默认值的 css 变量，然后通过 JS 更改变量的值。