Angular Material customize tab

Question

I\'m using angular 4 and I\'m using Angular Material.

Answer 1

Update

To customize tab background and ink bar, you can define your own theme then use the theme options on the tab group:

    
         Content 1 
         Content 2 
         Content 3 
    

Here is an example on StackBlitz.

Old answer with ::ng-deep

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