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

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

要通过$mdThemingProvider进行配置，请参阅Angular Material/$mdThemingProvider。

希望它有所帮助！