如何更改角度材质中所选标签的下划线颜色？

Question

我下面的教程把md-tabs在md-toolbar来自这里.但是,我选择的指标选项卡与md-primary使其不可见的颜色相同.请看下面的图片.

但是,当我改变md-tabsto 的颜色时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.

Answer 2

md-tabs md-ink-bar {
    color: green;
    background-color: green;
}