2

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

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

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

我不能style为元素使用属性，因为我需要选择器来申请所有子孩子！=）

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

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

对于一些回答者注意：

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

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

4

3 回答 3

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;
  }
}

于 2017-10-11T09:41:33.003 回答
0

这听起来可能很愚蠢。但这行得通吗？

import myCss from './mydesign.css';

myCss.foo.bar.var = "your color"
于 2017-10-11T09:04:16.630 回答
0

您可以使用元素的样式属性定义自定义 CSS 属性（CSS 变量）并将值分配给道具、状态等。

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

自定义属性适用于适用于该组件或子组件的任何选择器。所以你可以这样使用它：

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

在此处查看具有类似代码的片段

于 2020-12-04T23:25:00.060 回答