Question

已经整整两天了，我找不到任何解决方案。我还没有解决方案：(我有颜色状态。我将从颜色选择器中选择一种颜色，然后更新该特定颜色状态：要求是，如果我从颜色选择器中进行选择，则必须将其从react js属性或变量传递到覆盖它们的scss变量。如果可以将它从js转换为css，则必须通过reacrjs进行，然后可以从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，例如：

variables.scss

$primary:this.props.primary

login.scss

.btn{ 
    background-color:$primary
 }

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

我们可以内联样式，但是我想用上面定义的方式（通过.scss）来做。有可能吗？还是有更好的办法？

类似的东西

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

vuejs使用主题thats覆盖来scss变量

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

任何人都可以向我解释他们对我不了解的情况

Answer 1

我将改用样式化组件。在那里，您可以通过道具传递样式

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

Answer 2

首先。只是为了澄清。您无法从浏览器更改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(....);

我们可以否改写vs react props的scss变量？有可能吗？

2 个答案: