使用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 =＆＃34; textInput bar＆＃34;）或者您可以使用classNames library创建一个className（在任何情况下最终结果都是一个字符串）。

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

您可以检查in here ClassName是string