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

Question

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

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

当我尝试使用react-jss的injectSheet函数注入它们时：

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。 我的目标是将动态样式 (indicatorStyles) 从 Material UI 库中注入到 Tabs 组件中。 每次选择选项卡时，组件的 state 都会更改，然后我想将 更新的样式 注入 Tabs 组件。 任何帮助将不胜感激！

更新！ 由于下面的 Gabriele 的answer，上述警告已得到修复。

现在样式在应用我的自定义样式后被 react覆盖。

有没有办法使用 react-jss 作为!important 添加 CSS 规则？

Answer 1

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

类似

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