使用className設置react-toolbox元素的樣式

Question

我似乎在不使用主題的情況下設計組件樣式方面存在一些問題。 我只想更改幾種顏色，而無需為每個元素創建一個新主題。

在這種情況下，我只想將條形的顏色更改為棕色，現在我有一個輸入類，如下所示：

import style from './style.scss'
const TextInput = (props) => {
    <Input className={style.textInput} {...props} />
}

在我的style.scss文件中：

.textInput {
   .bar {
     background-color: #663300;
   }
}

任何幫助，將不勝感激。

Answer 1

ClassName不能那樣工作。 您不能將Css樣式傳遞給className，這是錯誤的。

可以將要應用的類名稱作為字符串傳遞（在您的情況下，我想它將是className =“ textInput bar”），也可以使用classNames庫創建一個className（無論如何，最終結果將是一個字符串）。

只要確保您要包含的樣式包含在該組件將要呈現的頁面中，它就會足夠聰明地為每個組件呈現正確的CSS類 。

您可以在此處簽入 ClassName是一個string