Angular 2 material tab active color customize

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

Found it! use this class. .mat-ink-bar{ background-color:#fff; } — Harikrishnan KayKay, Jul 25 '17 at 06:36
If you found a solution, you can answer and accept your own solution to mark it as solved — JeanJacques, Jul 25 '17 at 13:30
i cannot accept my own answer for 18 hrs, is what i got as a notification. — Harikrishnan KayKay, Jul 26 '17 at 11:23
This https://stackoverflow.com/a/76110331/14557085 worked for me in angular 15. — Julián Rojas, Jun 22 '23 at 16:31

score 12 · Answer 1 · answered Sep 13 '18 at 10:38

12

Try to it's work for me

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

answered Sep 13 '18 at 10:38

core114

5,155
16
92
189

score 4 · Answer 2 · answered Nov 13 '18 at 07:29

4

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

answered Nov 13 '18 at 07:29

SivaMuruganBaskaran

41
3

score 3 · Answer 3 · edited Dec 11 '18 at 11:51

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

edited Dec 11 '18 at 11:51

Suraj Rao

29,388
11
94
103

answered Dec 11 '18 at 11:42

Utkarsh Mishra

39
1

score 0 · Answer 4 · answered Jul 26 '17 at 11:22

0

To customize the active underline, modify this class

mat-ink-bar{ background-color:#fff; }

answered Jul 26 '17 at 11:22

Harikrishnan KayKay

293
1
3
13

score 0 · Answer 5 · answered May 23 '19 at 08:26

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

score 0 · Answer 6 · edited Feb 13 '21 at 16:26

0

.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar{
  background: black;
}

This works with Angular 10.

edited Feb 13 '21 at 16:26

Kos

4,890
9
38
42

answered Feb 02 '21 at 10:33

Ash Holy

1
1

score 0 · Answer 7 · answered Apr 30 '21 at 04:31

0

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

answered Apr 30 '21 at 04:31

Mohan Dere

4,497
1
25
21

score -1 · Answer 8 · answered Sep 02 '19 at 23:32

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

Angular 2 material tab active color customize

8 Answers8