更改材料角度標籤文本顏色

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。

希望它有幫助！