Ошибка неправильно сформированной строки CSS при добавлении динамических стилей с использованиемact-jss

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 закрыт проблема . Моя цель - добавить динамические стили (indicatorStyles) в компонент Tabs из библиотеки Material UI . Каждый раз, когда выбирается вкладка, state компонента изменяется, а затем я хочу добавить обновленные стили в Tabs компонент. Любая помощь будет принята с благодарностью!

UPDATE! Вышеупомянутое предупреждение было исправлено благодаря ответу Габриэле ниже.

Теперь стили перезаписываются по реакции после применения моих пользовательских стилей .

Есть ли способ добавить правила CSS, используя response-jss как !important?

Answer 1

Я не использовал response-jss, но, глядя на их документы, похоже, что вы должны проходить классы, а не свойства css напрямую.

Так что-то вроде

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