使用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，这是错误的。

要么以字符串的形式传递您想要应用的类名(在本例中，我猜应该是“textInput className=”)，要么可以使用classNames library创建一个className (在任何情况下，最终结果都将是一个字符串)。

只需确保您的样式包含在组件将要呈现的页面中，并且react将足够智能地为每个组件呈现正确的css类。

正如您可以检查的那样，in here ClassName是一个string