更改材料角度标签文本颜色

Question

我无法弄清楚如何为角度的材料设计扩展设置标签文本颜色。有codepen的例子。因此，我可以检查该元素，看看它是由一些自定义样式设置的，有些如何被注入到页面中。如何配置虽然逃脱我。

我的标签目前是默认颜色。我曾尝试修改$ 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。

希望它有帮助！