Question

如何在React中根据值按钮更改@import？

我想要的例子：我有this.state.modal = false

.js：

handleChange = () => {
  this.setState({
    modal: !this.state.modal
  })
}
<button onClick={this.handleChange}>Test</button>

和我的.scss：

if(this.state.modal === true) {
  @import 'theme/white';
} else {
  @import 'theme/black';
}

我当然不能用.scss打电话，但基本上这就是我想要的

Answer 1

您可以尝试执行此StackOverflow帖子中所述的方法。

https://stackoverflow.com/a/46543835/2853568

它返回一个promise，promise解析的结果就是您有条件希望导入的模块。

Answer 2

有多种样式。

您可以根据状态添加/更改类，并根据父类处理CSS。

<div className={this.state.modal ? "BlackTheme" : "WhiteTheme" }>
   {rest of your content}
</div>

在您的scss中

.BlackTheme {
   .button {
       background:black;
   }
}


.WhiteTheme {
   .button {
       background:white;
   }
}

Answer 3

SASS有条件渲染，例如您可以使用此处https://stackoverflow.com/a/13879344/7296909或此处https://github.com/sass/sass/issues/451#issuecomment-359489037提到的mixin

但是，您不能在JS的SASS中设置任何变量。但是，正如@ eramit2010所述，您可以根据值设置不同的类，例如：

const color = this.state.modal === true ? 'white' : 'black';
const className = ´theme ${color}´;

，然后在scss中：

%loadFileWhite {
  @import "theme/white";
}

%loadFileBlack {
  @import "theme/black";
}

.theme .white{
    @extend %loadFileWhite;
}

.theme .black{
    @extend %loadFileBlack;
}

使用Button React更改.scss

3 个答案: