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

Question

我需要为特定选择器动态更改 react 组件中的颜色。 在 scss(使用 sass)中我有以下规则:

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

我想在 React 代码中将其更改为黄色、红色或其他颜色。

I cant use style property for element, cause i need the selector to apply for all subchilds !=)

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

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

对于一些回答者注意:

So i have selector in some scss file, that imported in some root js file with .class * {color: $somecolor} and i need change the $somecolor in that selector, during picking colors in color picker

也许我可以以某种方式为所有嵌套在 style 属性中的选择器设置？还是有办法为 style prop 中的每个嵌套元素递归应用 css 样式？

Answer 1

关于

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

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