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

Question

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

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

Answer 1

Ну, у вас есть два варианта:

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

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

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

Answer 2

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

Answer 3

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

Во-первых, создать класс, который вы можете подключить к добавив его в компонент 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> 

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

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

.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?Потому что вы замените один цвет фона на другой и все еще не сможете его изменить по темам

Удачи всем!

Answer 4

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

'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) 
    } 
};