javascript - 更改 Material Angular 选项卡文本颜色

Question

我不知道如何为 Angular 的 Material 设计扩展设置选项卡文本颜色。有代码笔示例。因此，我可以检查元素并查看它是由某种自定义样式设置的，这些样式以某种方式注入(inject)到页面中。虽然我不明白这是如何配置的。

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

参见: https://material.angularjs.org/latest/demo/tabs

在第一个示例中，它们完全符合我的要求，其中选项卡文本随选择而变化。

编辑:显然我可以设置 CSS，但是我想使用已经配置的模板化颜色。

Answer 1

最好通过 $mdThemingProvider 配置默认主题.但是，您可以覆盖 Angular Material 的 默认 CSS 类来实现您想要的结果。

Tab's background color

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

Tab's text color

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

Active tab's text color

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

Disabled tab's text color

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

通过$mdThemingProvider配置，请引用Angular Material/$mdThemingProvider .

希望对您有所帮助!