Angular 2 material tab active color customize - customization

Question

I was looking to customize the active color for md-tab.
The classes in chrome dev console shows ==> -mat-tab-label mat-ripple mat-tab-label-active. But none has any border bottom. There was a chevron class which i tried to change, but no effect.
I tried /deep/ with almost all classes. Dint work.
Also checked md-tab-header, but nowhere am seeing even that color! Any help would be appreciated :)

Answer 1

Try to it's work for me
::ng-deep .mat-ink-bar {
background-color:#ee2925 !important;}

Answer 2

It's worked for me in Angular 6
.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar {
background-color: #1f29a2;
}

Answer 3

Works in Angular 7
.mat-tab-group.mat-primary .mat-ink-bar,.mat-tab-nav-bar.mat-primary .mat-ink-bar {
background-color: #2C702A;
}

Answer 4

To customize the active underline, modify this class
mat-ink-bar{ background-color:#fff; }

Answer 5

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

Answer 6

.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar{
background: black;
}
This works with Angular 10.

Answer 7

This solution is tested and works fine in Angular 10 -
.tabs .mat-tab-label.mat-tab-label-active {
background-color: #5e70db;
opacity: 1 !important;
}
.tabs .mat-ink-bar {
background-color: #3f51b5 !important;
}

Answer 8

any of those solutions didn't work for me but i did a general solution without use the encapsulation.none
/* Styles for tab labels */
::ng-deep .mat-tab-label {
min-width: 25px !important;
padding: 5px;
background-color: transparent;
color: red;
font-weight: 700;
}
/* Styles for the active tab label */
::ng-deep .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 */
::ng-deep .mat-ink-bar {
background-color: green;
}
using ::ng-deep you are telling to css inside material being overrite, then you can customice it