Angular Material customize tab

问题:

I'm using angular 4 and I'm using Angular Material (Angular 2 Material).

 <md-tab-group [disableRipple]=true>       <md-tab label="Tab 1"></md-tab>       <md-tab label="Tab 2"></md-tab>   </md-tab-group> 

How can I fully customize the background color when (not-selected / selected), text color, and etc. I tried already the pseudo classes...but still no avail. --- I have set the font-size successfully but the text color is a little bit jittery when set. Please help.

Update: Tried to change the background to transparent when selected...trying to override the color when the link is not selected in the tab and etc..but still doesn't work.

/* Styles go here */    .mat-tab-label{     color:white;     min-width: 25px !important;     padding: 5px;        background-color:transparent;         color:white;         font-weight: 700;   }    /deep/ .mat-tab-label{     min-width: 25px !important;     padding: 5px;        background-color:transparent;         color:white;         font-weight: 700; }  .md-tab.ng-scope.ng-isolate-scope.md-ink-ripple.md-active{       background-color:transparent;       color:white;       font-weight: 700;   }  .md-tab.ng-scope.ng-isolate-scope.md-ink-ripple{     background-color:transparent;     color:white;     font-weight: 700; }    .mat-tab-label:active{     min-width: 25px !important;     padding: 5px;        background-color:transparent;         color:white;         font-weight: 700; }  .mat-tab-label:selected{     min-width: 25px !important;     padding: 5px;        background-color:transparent;         color:white;         font-weight: 700; }

回答1:

In your component, set ViewEncapsulation to None and add the styles in your component.css file.

Changes in Typescript code:

import {Component, ViewEncapsulation} from '@angular/core';  @Component({   ....   encapsulation: ViewEncapsulation.None }) 

component styles css:

/* Styles for tab labels */ .mat-tab-label {     min-width: 25px !important;     padding: 5px;     background-color: transparent;     color: red;     font-weight: 700; }  /* Styles for the active tab label */ .mat-tab-label.mat-tab-label-active {     min-width: 25px !important;     padding: 5px;     background-color: transparent;     color: red;     font-weight: 700; }  /* Styles for the ink bar */ .mat-ink-bar {     background-color: green; } 

Link to working demo

回答2:

If you don't want to touch ViewEncapsulation, use ::ng-deep instead with class selector (inspect by browser dev tool).

For example (Angular 5, Material 2):

/* active tab */ ::ng-deep .mat-tab-list .mat-tab-labels .mat-tab-label-active { color:red; background-color: green; }  /* ink bar */ ::ng-deep .mat-ink-bar { background-color: var(--primary-color,#1F89CE) !important; } 

文章来源: Angular Material customize tab