javascript - 如何更改 Angular Material 中选定选项卡的下划线颜色？

Question

我正在按照教程放置 md-tabs在 md-toolbar来自 here .但是，我选择的指标选项卡与 md-primary 颜色相同这使它不可见。请看下图。



但是，当我更改 md-tabs 的颜色时至md-accent ，它将显示指标。



如何更改所选指标选项卡的颜色？

这是代码:

<md-toolbar class="md-whiteframe-5dp">
    <div class="md-toolbar-tools">
        <h2>Title</h2>
    </div>

    <md-tabs md-selected="tabs.selectedIndex">
        <md-tab id="tab1" aria-controls="tab1-content">Tab #1</md-tab>
        <md-tab id="tab2" aria-controls="tab2-content">Tab #2</md-tab>
        <md-tab id="tab3" aria-controls="tab3-content">Tab #3</md-tab>
    </md-tabs>
</md-toolbar>

<md-content layout-padding flex>
    <ng-switch on="tabs.selectedIndex" class="tabpanel-container">
        <div role="tabpanel" id="tab1-content" aria-labelledby="tab1" ng-switch-when="0" md-swipe-left="tabs.next()" md-swipe-right="tabs.previous()">
            View for Item #1<br />
            data.selectedIndex = 0
        </div>

    <div role="tabpanel" id="tab2-content" aria-labelledby="tab2" ng-switch-when="1" md-swipe-left="tabs.next()" md-swipe-right="tabs.previous()">
        View for Item #2<br />
        data.selectedIndex = 1
    </div>

    <div role="tabpanel" id="tab3-content" aria-labelledby="tab3" ng-switch-when="2" md-swipe-left="tabs.next()" md-swipe-right="tabs.previous()">
        View for Item #3<br />
        data.selectedIndex = 2
    </div>
    </ng-switch>
</md-content>

顺便说一句，所有颜色都是默认的。

Answer 1

最简单的方法是通过 CSS 进行更改:

md-tabs.md-default-theme md-ink-bar, md-tabs md-ink-bar {
    color: red !important;
    background-color:red !important;
}

但您也可以查看文档中关于主题的§:
https://material.angularjs.org/latest/Theming/01_introduction

有时 CSS 会在样式标签中即时嵌入和生成，如果此代码不起作用，请尝试使用 !important 强制颜色.