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

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

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

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

我不能为元素使用

样式

属性，因为我需要选择器 申请所有子孩子！=）

有什么土生土长的方法吗？还是应该用镭？或者是否有类似的LIB？也许有人能帮上忙

---

我有颜色选择器，我不能为每种颜色写班级风格=(

对于一些回答者，请注意：

所以我在一些scss文件中有一个选择器，它是用

.class*{color:$somecolor}

导入到一些根js文件中的，在颜色选择器中拾取颜色时，我需要更改选择器中的$somecolor

---

也许我可以通过某种方式为

style

属性中的所有嵌套项设置选择器？或者有一种方法可以递归地为

style

属性中的每个嵌套项应用css样式？

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

import myCss from './mydesign.css';

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

那怎么办

类MyComponent扩展了React.Component{ render（）{ const yellow=正确//您的情况 返回( 您可以使用元素的style属性定义一个属性，并将该值指定给prop、state等

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

---

查看一个代码类似的代码片段

如果我有一个文件，其中我一个接一个地导入了所有css文件，该怎么办？我不会在每个组件中导入css。如何处理这种情况？我再次在组件中导入css会不会出错？如果您导入父组件中的所有css，并且希望将其从子组件更改为子组件，则我不需要在你的子组件中导入css，制作一个函数，你将在父组件中更改颜色，并将其作为道具发送给子组件，每当你需要更改子组件的颜色时，只需调用子组件中的道具，它就会工作，对吗？我不知道=（现在我的根目录中有类似的内容，

import./my_-scss/bootstrap/css/bootstrap.css'；import./my_-scss/custom.scss'；

如果我将import指定给变量，我应该更改一些内容吗？或者如果将import指定给变量，所有操作都将相同？=）我有颜色选择器，我无法为每种颜色编写样式=（我需要更改Selector中css属性的值，或者您无法在子孩子的父级中应用style标记？您的确切意思是什么？我在当前组件中有许多嵌套元素。例如div inside div inside div inside div。如果我更改maing的样式（根/父级）颜色将只在其中更改。但我需要将其应用于每个资源。其他样式（如引导）为它们设置颜色，因此我应该使用选择器，应用颜色样式道具，覆盖其他选择器（如引导或其他）您可以为颜色选择器发布HTML示例吗？

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