Angular 2 material tab active color customize

user_2803691 0
Viewed 13778

I was looking to customize the active color for md-tab. enter image description here

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 :)

angular-material2 customization
8 Answers

Try to it's work for me 

::ng-deep .mat-ink-bar {
  background-color:#ee2925 !important;}
user_82686440

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

user_31634570

Works in Angular 7

.mat-tab-group.mat-primary .mat-ink-bar,.mat-tab-nav-bar.mat-primary .mat-ink-bar {
    background-color: #2C702A;
}
user_107755670

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;
}
user_74039560 
.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar{
  background: black;
}

This works with Angular 10.

user_149881920

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

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

user_111619170
Related