角度材の選択したタブの下線色を変更するにはどうすればいいですか？

Question

md-tabsをmd-toolbarのhereに入れるチュートリアルに進んでいます。しかし、私の選択したインジケータタブは、それを見えないようにするmd-primaryと同じ色です。以下の画像をご覧ください。

しかし、私はmd-accentにmd-tabsの色を変更すると、それは、インジケータが表示されます。

どのように選択されたインジケータタブの色を変更できますか？ここで

コードです：

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

Answer 3

私もこの問題を抱えていました。私は、CSSを上書きするソリューションが気に入らない。だから、AAはるかに便利で、よりまっすぐ進むのソリューションがあります：

はちょうどあなたのパレットのデフォルトHUEを設定します。

$mdThemingProvider.theme('default') 
      .primaryPalette('amber', { 'default': '600'}) 
      .accentPalette('indigo', { 'default': '400'}); 

タブインクバー、FABのspeedialは、...からこの色を使用しますあなたのパレット。

Answer 4

あなたはカストムテーマを定義し、アクセント色をmdインクバーに設定する必要があります。この例では、白です：

var customAccent = { 
    '50': '#b3b3b3', 
    '100': '#bfbfbf', 
    '200': '#cccccc', 
    '300': '#d9d9d9', 
    '400': '#e6e6e6', 
    '500': '#f2f2f2', 
    '600': '#ffffff', 
    '700': '#ffffff', 
    '800': '#ffffff', 
    '900': '#ffffff', 
    'A100': '#ffffff', 
    'A200': '#fff', 
    'A400': '#f2f2f2', 
    'A700': '#ffffff' 
}; 
$mdThemingProvider 
.definePalette('whiteAccent', customAccent); 

$mdThemingProvider.theme('whiteAccentTheme') 
    .primaryPalette('deep-purple') 
    .accentPalette('whiteAccent'); 

あなたがこのサイトにアクセントパレットを生成することができます：あなたのビューでhttps://angular-md-color.com/#/

を、あなたのMD-タブのための新しいカスタムテーマを使用します。

<div md-theme="whiteAccentTheme"> 
    <md-tabs class="md-primary">...</md-tabs> 
</div> 

Answer 5

ちょうどうまくいかなかったレスポンスを読んで無駄に時間を費やしたが、これは私が見つけた解決策です。 CSSを新しくし、CSSを軽視する人として、私は自分のソリューションをCSSに新しいものやCSSを軽視する人に投稿すると考えました。

HTML

<md-tab-group> 
    <md-tab> 
     <ng-template md-tab-label> 
      <span class="mdTab">Tab Label</span> 
     </ng-template> 
    </md-tab> 
</md-tab-group> 

CSS

.mdTab{ 
    color: white; 
}