如何在反應 js 代碼中動態更改 css 選擇器屬性值？

Question

我需要為特定選擇器動態更改反應組件中的顏色。 在 scss（使用 sass）中，我有以下規則：

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

我想在反應代碼中將其更改為黃色、紅色或其他顏色。

我不能為元素使用style屬性，因為我需要選擇器來申請所有子孩子！=）

有沒有本土的方法？ 還是我應該使用鐳？ 或者有沒有類似的庫？ 也許 css-next some hove 可以幫助解決這個問題？

我有顏色選擇器，我不能為每種顏色編寫類樣式=(

對於一些回答者注意：

所以我在一些 scss 文件中有選擇器，在一些根 js 文件中使用.class * {color: $somecolor} ，我需要在顏色選擇器中選擇顏色期間更改該選擇器中的 $somecolor

也許我可以以某種方式為所有嵌套的style屬性設置選擇器？ 或者有如何為style道具中的每個嵌套項目遞歸應用 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; } }

Answer 2

這聽起來很愚蠢。 但這行得通嗎？

import myCss from './mydesign.css';

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

Answer 3

您可以使用元素的 style 屬性定義自定義 CSS 屬性（CSS 變量） ，並將值分配給 prop、state 等。

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

自定義屬性適用於任何適用於該組件或子組件的選擇器。 所以你可以這樣使用它：

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

在此處查看具有類似代碼的片段