如何動態更改反應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選擇器屬性值？

回答

相關問題