React Material UI Tabs добавление цвета индикатора через гекс?

Question

Я получил этот компонент пользовательского интерфейса для материала

<Tabs
   textColor="primary"
   indicatorColor="primary"
>
   <Tab label="All Issues"/>
</Tabs>

В соответствии с doc IndicatorColor и textColor можно установить только на «первичный» или «вторичный», это перечисление.Я хочу иметь возможность установить эти цвета на собственное шестнадцатеричное значение.Я пытался просто жестко кодировать, как 'textcolor = "# ffffff"', но это не сработало.Любой совет?

Answer 1

Вы можете использовать indicator и label для изменения CSS для вкладок.

изменения jss

const styles = theme => ({
  label: {
    color: '#FFF000'
  },
  indicator: {
    backgroundColor: '#FFF'
  }
});

Вкладки как это

<Tabs indicatorColor="primary" classes={{ indicator: classes.indicator }} value={value} onChange={this.handleChange}>
        <Tab classes={{ label: classes.label }} label="Item One" />
        <Tab classes={{ label: classes.label }} label="Item Two" />
        <Tab classes={{ label: classes.label }} label="Item Three" />
      </Tabs>

Здесь в этом коде выше метка вкладки будет отображать yellow, а индикатор будет white

.

посмотрите рабочий пример здесь: https://codesandbox.io/s/8111zjxm0l

Надеюсь, это поможет.