更改材质角度选项卡文本颜色

Question

我无法弄清楚如何为角度的材质设计扩展设置标签文本颜色.有代码示例.因此,我可以检查元素并看到它是由一些自定义样式设置的,一些如何被注入到页面中.如何配置虽然逃避了我.

我的标签目前是默认颜色.我尝试修改$ mdThemingProvider,但这不会改变文本颜色.

请参阅:https: //material.angularjs.org/latest/demo/tabs

它们完全符合我想要的第一个例子,其中标签文本在选择时发生变化.

编辑:显然我可以设置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;
}

要配置via $mdThemingProvider,请参阅Angular Material/$ mdThemingProvider.

希望能帮助到你!