Question

我需要动态更改特定选择器的react组件中的颜色。在scss（使用sass）中，我有以下规则：

foo.bar.var * {
  color: blue;
}

我想在反应代码中将其更改为黄色，红色或其他内容。

我无法使用style属性作为元素，因为我需要选择器申请所有子项！=）

有原生方式吗？或者我应该使用镭？或者有没有类似的库？也许css-next some hove可以帮助解决这个问题？

我有颜色选择器，我不能为每种颜色编写类样式 =（

对于一些回答者注意：

所以我在一些scss文件中有选择器，导入了一些带有.class * {color: $somecolor}的根js文件中，我需要在选择器中选择$ somecolor，在颜色选择器中选择颜色

也许我可以以某种方式为所有嵌套的style属性设置选择器？或者如何以递归方式为style道具中的每个嵌套项应用css样式？

Answer 1

怎么样？

＆＃13;

class MyComponent extends React.Component {
  render() {
    const yellow = true // Your condition
    
    return(
      <div className={`foo bar var ${yellow  && 'yellow'}`}
        My item
      </div>
    )
  }
}

＆＃13;

.foo.bar.var {
  & * {
    color: blue;
  }
  &.yellow * {
    color: yellow;
  }
}

＆＃13;

Answer 2

这可能听起来很愚蠢。但这有用吗？

import myCss from './mydesign.css';

myCss.foo.bar.var = "your color"

Answer 3

您可以使用元素的style属性定义custom CSS property (CSS variables)并将其值分配给prop，state等。

<div className='foo bar var' style={{ "--my-color": props.color }}></div>

custom属性适用于适用于该组件或子组件的任何选择器。因此，您可以像这样使用它：

foo.bar.var * {
  color: var(--my-color);
}

查看具有类似代码here的代码段

如何在反应js代码中动态更改css选择器属性值？

3 个答案: