Как изменить активный цвет вкладки в материале React-ui?

Как изменить цвет активной вкладки?

Я имею в виду, эту строку pink, посмотрите на рис.

введите описание изображения здесь

ОТВЕТЫ

Ответ 1

У вас есть два варианта:

Вы можете настроить тему:
http://www.material-ui.com/#/customization/themes

Но самый простой способ - использовать свойство inkBarStyle. Вы можете увидеть его в docs.
Пример:

<Tabs inkBarStyle={{background: 'blue'}}>...

Ответ 2

Решение @Risa работает просто отлично и должно быть принятым ответом. Мой пример ее объяснения выглядит так:

<Tabs
  fullWidth
  centered
  classes={{
    indicator: classes.indicator
  }}>
    <Tab />
    <Tab />
</Tabs>

и стили:

const styles = theme => ({
  indicator: {
    backgroundColor: 'white',
  },
})

Ответ 3

Для material-ui версии 1.0.0-beta.36 у меня работало следующее:

<Tabs indicatorColor={'HEX_COLOR'}>

inkBarStyle, должно быть, устарел/заменен индикатором Colour в версии 1.0

РЕДАКТИРОВАТЬ: Ссылка на v1.0 документы: https://material-ui-next.com/api/tabs/

РЕДАКТИРОВАТЬ: После стабильной версии v1.0, кажется, предыдущее решение больше не работает.

Вот остальные решения:

  1. Используйте переопределение классов для класса indicator. Ссылка на документы по переопределениям. Ссылка на документацию Tab tab с классами CSS API внизу.
  2. Сконфигурируйте свою палитру тем, чтобы использовать желаемый цвет с помощью primary или secondary цветовых намерений. Затем вы можете указать желаемый primary или secondary цвет, который будет использоваться с атрибутом indicatorColor упомянутым выше. Ссылка на Документы.

Переопределение классов может быть более простым вариантом. Вам нужно использовать компонент withStyles чтобы withStyles свои классы стилей. Причина в том, что стилизация библиотеки переопределит ваши классы или компоненты стиля. Документы, ссылки на которые приведены выше, являются отличным примером.

Ответ 4

Хотя это довольно старый вопрос, он все еще получает некоторое внимание, и для тех из нас, кто использует несколько и сильно настроенных тем, это хлопот. У меня есть лучшее решение, которое позволит вам настроить его в разных цветах в соответствии с темой

Сначала создайте класс, к которому вы можете подключиться, добавив его в компонент Tabs таким образом

<Tabs
   onChange={this.handleChange}
   value={this.state.slideIndex}
   className="dashboard-tabs"> //this is what you need
       <Tab label="Main" value={0}/>
       <Tab label="Analytics" value={1}/>
       <Tab label="Live Widgets" value={2}/>
</Tabs>

Помните, что мои вкладки и ваши вкладки могут быть разными, поэтому обратите внимание только на строку className. Вы можете назвать все, что захотите. 1. Если вы хотите иметь разные вкладки с другим подчеркиванием, назовите его что-то значимое, как вкладки панели мониторинга, если вкладки находятся на вкладке "Панель управления" или "Быстрая панель", если они являются частью быстрой панели и т.д. 2. если ваши вкладки будут по сути то же самое, назовите его более глобально, как материальные вкладки, и теперь вы можете использовать этот класс в любом месте, и ваш css будет работать, не создавая этого снова.

Теперь, используйте этот класс как класс hook и используйте специфику для достижения подчеркивания, например this

.dashboard-tabs > div{
    background-color: #333 !important;
}
.dashboard-tabs > div:nth-child(2) > div{
    background-color: #ddd !important;
}

Не волнуйся о важности. Tabboo, что использование! Важно плохо, это всего лишь большой табло. Все будет хорошо.

Вот пример SCSS

.dashboard-tabs{
    > div{
        background-color: $bg-color-meddark !important;
        &:nth-child(2){
            > div{
                background-color: $brand-info !important;
            }
        }
    }
}

Это решение было бы очень полезно, если бы вы использовали несколько тем, потому что (при условии, что вы правильно настроите их), в вашем коде должен быть добавлен динамический класс темы, который изменяет ваш пользовательский интерфейс от одного цвета к другому. Итак, скажем, у вас есть 2 темы. 1 является светом и использует класс темы light-theme, а 2 - темную тему и использует класс dark-theme

Теперь вы можете сделать это следующим образом:

.light-theme .dashboard-tabs > div{
    background-color: #fff !important;
}
.light-theme .dashboard-tabs > div:nth-child(2) > div{
    background-color: #333 !important;
}
.dark-theme .dashboard-tabs > div{
    background-color: #333 !important;
}
.dark-theme .dashboard-tabs > div:nth-child(2) > div{
    background-color: #ddd !important;
}

Имеет смысл?

Почему я против решения InkBarStyle? Потому что вы будете заменять один цвет фона для другого и все еще не в состоянии изменить его по темам

Удачи всем!

Ответ 5

Вот шаблон темы, который будет использоваться в ваших проектах:

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

let _colors = require('material-ui/styles/colors');
let _colorManipulator = require('material-ui/utils/colorManipulator');
let _spacing = require('material-ui/styles/spacing');
let _spacing2 = _interopRequireDefault(_spacing);

function _interopRequireDefault(obj) {
  return obj && obj.__esModule ? obj : {default: obj};
}

exports.default = {
  spacing: _spacing2.default,
  fontFamily: 'Roboto, sans-serif',
  borderRadius: 2,
  palette: {
    primary1Color: _colors.grey50,
    primary2Color: _colors.cyan700,
    primary3Color: _colors.grey600,
    accent1Color: _colors.lightBlue500,
    accent2Color: _colors.pinkA400,
    accent3Color: _colors.pinkA100,
    textColor: _colors.fullWhite,
    secondaryTextColor: (0, _colorManipulator.fade)(_colors.fullWhite, 0.7),
    alternateTextColor: '#303030',
    canvasColor: '#303030',
    borderColor: (0, _colorManipulator.fade)(_colors.fullWhite, 0.3),
    disabledColor: (0, _colorManipulator.fade)(_colors.fullWhite, 0.3),
    pickerHeaderColor: (0, _colorManipulator.fade)(_colors.fullWhite, 0.12),
    clockCircleColor: (0, _colorManipulator.fade)(_colors.fullWhite, 0.12)
  }
};

Ответ 6

Вы можете попробовать этот материал последней версии поддержки интерфейса TabIndicatorProps, через который вы можете передать стиль ключа.

<Tabs TabIndicatorProps={{style: {background:'ANY_COLOR'}}}>......

Ответ 7

Вы можете создать розовый div, который анимируется с помощью JavaScript JQuery. Он будет находиться внутри зеленого div того же цвета, что и вкладки.