Изменить материал угловой вклад текста цвет

Question

Я не могу понять, как цвет текста вкладки задан для расширения дизайна материала углового. Имеются примеры codepen. Поэтому я могу проверить элемент и посмотреть, что он задан каким-то обычным стилем, который каким-то образом вводится на страницу. Как это настроено, хотя и ускользает от меня.

Мои вкладки в настоящее время являются цветом по умолчанию. Я пробовал модифицировать $ mdThemingProvider, но это не меняет цвет текста.

См: https://material.angularjs.org/latest/demo/tabs

Они делают именно то, что я хочу в первом примере, где вкладка изменения текста по выбору.

EDIT: Очевидно, что я могу установить CSS, однако я хочу использовать уже настроенные цвета.

Answer 1

Предпочтительно настроить тему по умолчанию с помощью $mdThemingProvider. Но вы можете переопределить Angular Material's классы по умолчанию CSS для достижения желаемого результата.

вкладки цвет фона

md-tabs > md-tabs-wrapper { 
    background-color: #f00 !important; 
} 

цвет текста вкладки

md-tabs > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]) { 
    color: #fff !important; 
} 

цвет текста активной вкладки в

md-tabs > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-active, md-tabs > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-active md-icon, md-tabs.md-accent > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-active md-icon, md-tabs.md-default-theme.md-accent > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-focused, md-tabs.md-default-theme.md-accent > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]).md-focused md-icon { 
    color: #222 !important; 
} 

цвет текста вкладки-инвалидов

md-tabs .md-tab[disabled], md-tabs .md-tab[disabled] md-icon { 
    color: #000 !important; 
} 

Для настройки с помощью $mdThemingProvider, пожалуйста, обратитесь Angular Material/$mdThemingProvider.

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