我们可以覆盖scss变量vai react props吗？有可能吗？

Question

整整两天我都找不到任何解决方案。我还没有解决方案:(我有颜色状态。我将从颜色选择器中选择一种颜色，我将更新该特定颜色状态： 要求是如果我从颜色选择器中选择它必须从反应 js 属性或变量传递到 scss 变量 n 覆盖它们。它必须通过 reacrjs 到 scss 完成，如果它可以从 js 到 css 完成，那么它可以从 reacr js 到 scss 完成，这是我缺少的一件事。

App.js

{
  primary: '#1976D2',
  secondary: '#424242',
  accent: '#82B1FF',
  error: '#FF5252',
  info: '#2196F3',
  success: '#4CAF50',
  warning: '#FFC107'
} 

例如：primary: '#1976D2' 我会选择更新到 primary: '#ffffff' 类似：

App.js

changeColor(e){
  this.setState({primary:e.target.value}) // the value is updated to #ffffff
}

现在，我需要将this.props.primary 传递给.scss，例如：

变量.scss

$primary:this.props.primary

login.scss

.btn{ 
    background-color:$primary
 }

我的需要是如果我从颜色选择器中选择它必须是动态的，它必须从 react js 属性或变量传递到 scss 变量 n 覆盖它们

我们可以做内联样式，但我想按照上面定义的方式做（通过 .scss）。 有可能吗？或者有更好的方法吗？

类似的东西

https://vuetifyjs.com/en/style/theme

vuejs 使用覆盖 scss 变量的主题

Vue.use(Vuetify, {
 theme: {
primary: '#3f51b5',
secondary: '#b0bec5',
accent: '#8c9eff',
error: '#b71c1c'
 }
})

谁能解释一下他们是怎么做的，我不明白

Answer 1

首先。只是为了澄清。您无法从浏览器更改 SASS 变量。因为它是如何工作的：SASS 代码 -> 编译成 CSS -> CSS 从服务器发送到浏览器 -> 。所以我们实际上应该搜索“如何通过 JS 以一致的方式覆盖 SASS 变量”。

我看到这样做的唯一方法是使用 CSS 自定义属性。查看spec 以了解他们的注意事项（例如，它不能用作@media 中大小值的一部分）以及关于support in browsers。

我不确定 SASS 是否支持将变量编译到 CSS 自定义属性中。看看css-vars mixin。随着使用

$css-vars-use-native: true;

您将把变量导出为 CSS 自定义属性。 不幸的是，这意味着您需要更改现有样式以使用 mixin 中的 var() 来处理您希望以后能够覆盖的变量

然后您的代码将能够像覆盖任何自定义属性一样简单

document.body.style.setProperty('--primaryColor', myColorValueFromDatePicker)

查看fine and short article，了解如何使用 JS 更改自定义属性

注意，由于自定义属性使用与任何 CSS 相同的级联方法，因此您还可以在 DOM 的任何部分应用更改的值：

document.querySelector('#previewBlock').style.setProperty(....);

Answer 2

我会改用样式化组件。在那里你可以通过 props 传递你的样式

https://www.styled-components.com/docs/advanced