使用react-jss添加动态样式时CSS字符串格式错误

Question

我在组件状态中存储了CSS样式，如下所示：

state = {
    value: 1,
    indicatorStyles: {
      indicator: {
        backgroundColor: "rgb(224, 174, 97)",
      }
    },
};

，当我尝试使用injectSheet的 react-jss 功能注入它们时：

const CustomTabs = ({classes, children}) => (
      <Tabs 
      value={value} 
      onChange={this.handleChange}
      classes={{root: classes.root, indicator: classes.indicator}}
      >
        {children}
      </Tabs>
    );
const StyledCustomTabs = injectSheet({...indicatorStyles, root: styles.tabsRoot})(CustomTabs);

我在控制台中收到以下错误：

  

警告：格式错误的CSS字符串“ rgb（224，174，97）”

仅在github关闭issue时，我才在网上没有发现这样的错误。 我的目标是从 Material UI 库向indicatorStyles组件中注入动态样式（Tabs）。 每次选择一个标签时，组件的state都会发生变化，然后我想将更新的样式注入到Tabs组件中。 任何帮助将不胜感激！

更新！ 由于下面的加布里埃尔（Gabriele）的answer，上述警告已得到解决。

现在，在应用我的自定义样式后，通过反应覆盖覆盖。

是否有一种方法可以使用react-jss作为!important添加CSS规则？

Answer 1

我还没有使用react-jss，但是看到他们的文档，看来您应该直接传递类而不是CSS属性。

类似

indicatorStyles: {
    someStyle: {
      backgroundColor: "rgb(224, 174, 97)",
    },
}