Я получил этот компонент пользовательского интерфейса материала
<Tabs
textColor = "primary"
indicatorColor = "primary"
>
<Tab label = "All Issues"/>
</Tabs>
Согласно документу indicatorColor и textColor могут быть установлены только «primary» или «secondary», это перечисление. Я хочу иметь возможность установить для этих цветов индивидуальное шестнадцатеричное значение. Я пробовал просто жестко кодировать, например, textcolor = "# ffffff" ', но это не сработало. Любой совет?
Вы можете использовать indicator
и label
для изменения CSS для вкладок.
jss изменения
const styles = theme => ({
label: {
color: '#FFF000'
},
indicator: {
backgroundColor: '#FFF'
}
});
Такие вкладки
<Tabs indicatorColor = "primary" classes = {{ indicator: classes.indicator }} value = {value} onChange = {this.handleChangeEvent}>
<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
Надеюсь, это поможет.
посмотрите, у них есть различные способы четыре для переопределения стиля для ваших компонентов, и вы можете увидеть код. Посмотреть примеры