如何动态更改反应JS代码中的CSS选择器属性值？

我需要动态更改特定选择器的反应组件中的颜色。在SCSS（SASS使用），我有以下规则：如何动态更改反应JS代码中的CSS选择器属性值？

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

我想在改变它的反应代码，以黄色，红色或别的东西。

我不能使用style属性元素，因为我需要选择要适用于所有subchilds！=）

有没有原生的方法呢？或者我应该使用Radium？或者有没有类似的库？也许css-next有一些可以帮助解决这个问题？

我有拾色器，我不能写类样式为每一种颜色 =（

对于一些应答者注：

所以我在一些SCSS文件有选择，在某些根原装进口与.class * {color: $somecolor} js文件，我需要改变$ somecolor在选择，挑选颜色在颜色选择器

也许我能以某种方式设定选择为所有在内斯特d内style属性？或者如何递归地为style道具的每个嵌套项目应用css风格？

来源

2017-10-11 sky great

你尝试过这么远吗？ –

这可能听起来很愚蠢。但这样做的工作？

import myCss from './mydesign.css'; 

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

来源

2017-10-11 09:04:16 Jeffin

如果我有一个一个一个地导入每个css文件的文件，该怎么办？我不会在每个组件中导入css。如何处理这种情况？这是错误的，我再次导入组件中的CSS？ –

如果您要导入父组件中的所有css，并且希望将它从子组件更改，则不必在子组件中导入css，可以创建一个函数，在其中更改父组件中的颜色并发送它作为子组件的道具，当你需要改变子组件的颜色时，只需从子组件调用道具，它就可以工作，对吧？ – Jeffin

我不知道=（现在我有这样的东西在我的根'进口'./my_scss/bootstrap/css/bootstrap.css'; import'./my_scss/custom.scss';' 我应该改变什么，如果我将分配导入到变量？或者一切将工作相同，如果分配给变量？=） –

什么

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-11 09:41:33 RMontes13

我有颜色选择器，我不能写每种颜色的样式=（ –

我需要更改exatcly选择器内的css属性值 –

你不能在你的子元素的父元素中应用样式标记吗？ – RMontes13

如何动态更改反应JS代码中的CSS选择器属性值？

回答

相关问题