Вкладки пользовательского интерфейса React Material добавляют цвет индикатора через шестигранник?

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

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

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

посмотрите, у них есть различные способы четыре для переопределения стиля для ваших компонентов, и вы можете увидеть код. Посмотреть примеры

Alex Montoya 26.10.2018 11:05
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
1
1
3 892
1

Ответы 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.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

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

Другие вопросы по теме