Angular Material customize tab

Question

I'm using angular 4 and I'm using Angular 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've already tried using 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:

I've 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;
}

create a plunker with what you have tried so far. Here is a link: https://plnkr.co/edit/?p=preview — FAISAL, Aug 29 '17 at 13:56
In case the colors are not showing as expected, you might also want to change the default `.mat-tab-label { opacity: 0.6 }`. — Elias Strehle, Sep 23 '21 at 13:56

score 100 · Accepted Answer · edited Jul 18 '18 at 10:05

100

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

Demo

edited Jul 18 '18 at 10:05

Edric

24,639
13
81
91

answered Aug 29 '17 at 14:23

FAISAL

33,618
10
97
105

Wait..do you know how to change the color to 'pure' white if the tab is not selected. IT's showing white but the actual color is somewhat disabled. – Desu Aug 29 '17 at 14:54
1

set `background-color` to color you want in `.mat-tab-label` class. See this updated plunker: https://plnkr.co/edit/Vq5LYJIdY8IFfRMVi7Fv?p=preview – FAISAL Aug 29 '17 at 14:57
@Faisal Sir, I was implemented your code part but is it not work for me – core114 Sep 13 '18 at 09:56
3

To update ink-bar try this : `.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar { height:4px; }` – user12 Oct 23 '18 at 09:07
1

Looking at your demo, how to prevent label movement when clicked? – JF Gagnon May 01 '19 at 16:10
Perfecto! Thank you. – lakshman_dev May 17 '19 at 14:12
1

Avoid giving padding. It will do. @JFGagnon – lakshman_dev May 17 '19 at 14:13
1

Problem here, is that when we use ViewEncapsulation.None, all the css in this component will bleed out to other components. What If I have a mat-tab-label in the next component where I dont want to share the same css on both? You may say viewencapsualtion.none as well on the other component, but then that component will also bleed out its css to others... – Gel May 21 '20 at 18:25
1

That was a life saver. Angular community should put such answers in its important links list. – Rehmanali Momin Jul 06 '20 at 17:47
@Gel Incase set the encapsulation as None, just make the selectors in that component specific (set class for example) – Anh Hoang Dec 17 '20 at 08:06
Or instead of using ViewEncapsulation.None, you can also use :host with ::ng-deep on css – antia Feb 17 '21 at 11:47
**background-color: transparent;** is the most important line :) – J A S K I E R Jun 11 '21 at 10:23
1

I'm sorry but this is honestly a TERRIBLE answer. As Gel mentioned you're effectively changing the css for your entire site. Any tab controls loaded AFTER this one will suddenly take on these stylings. You may as well just put this css in your styles.css and add a qualifying class to it so you can choose it as needed throughout your app. Or `::ng-deep` is perfectly fine. It's not going anywhere. There is a custom label example here https://material.angular.io/components/tabs/examples but that doesn't play well with background color - but it's the way to go if you only need to change the text. – Simon_Weaver Jul 28 '21 at 19:50

Quan VO · Answer 2 · 2019-10-13T15:20:44.643

Update

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

<div class="my-theme">
    <mat-tab-group [backgroundColor]="'primary'" [color]="'warn'">
        <mat-tab label="First"> Content 1 </mat-tab>
        <mat-tab label="Second"> Content 2 </mat-tab>
        <mat-tab label="Third"> Content 3 </mat-tab>
    </mat-tab-group>
</div>

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

::ng-deep is going to be deprecated. ViewEncapsulation is the way to go. — Hypenate, Nov 22 '18 at 08:25

score 9 · Answer 3 · answered Jan 08 '19 at 18:32

9

Latest Solution:-

1)Override in styles.css 2) Use selector of component of where that material-tab exists

styles.css

  app-child .mat-tab-label.mat-tab-label-active {
    padding: 0px 15px ;
  justify-content: flex-start;
  }

  app-child .mat-tab-label{
    padding: 0px 15px ;
  justify-content: flex-start;
  }

.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar{
    background:#6168e7;
  }

answered Jan 08 '19 at 18:32

Mahi

3,748
4
35
70

2

This should be a better solution, because it will avoid the use of `ViewEncapsulation.None`. by not using `ViewEncapsulation.None`, all the component specific css will remain tightened to it, and only the css which we cannot target for the angular material library will be targeted from the global CSS file, and this still a clean solution because the component selector is used in this global css file, so no possible confusion or maintainability issues later. – HDJEMAI Jul 04 '20 at 12:48
1

@HDJEMAI is right. This is a better solution. Using ViewEncapsulation.None, it creates issues in other parts of the application. And this solution works absolutely fine. – Rehmanali Momin Jul 13 '20 at 15:57

Parth kharecha · Answer 4 · 2021-12-09T09:59:07.977

Angular version 6

New Design for custom tab

html

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

scss

::ng-deep .mat-tab-labels {
  min-width: auto !important;
  div {
    border: 1px solid #fff;
    background-color: #404040;
      &.mat-tab-label-active {
        background-color: #3aafa9;
        .mat-tab-label-content {
          border: none;
          background-color: #3aafa9;
          }
      }
      .mat-tab-label-content {
        border: none;
        color: #fff !important;
        }
    }
 }

 ::ng-deep .mat-tab-group{
  &.mat-primary {
    .mat-ink-bar {
      background-color: transparent;
    }
  }
 }

 ::ng-deep .mat-tab-body-wrapper{
   min-height: 550px
 }

 ::ng-deep .mat-tab-label-container {
   flex-grow: 0 !important;
 }

::ng-deep .mat-tab-label{
  opacity: 1 !important;
 }

this still is working but you need replace `/deep/` to `:ng-deep` — fuliozor, Nov 07 '21 at 00:45

score 2 · Answer 5 · answered Dec 11 '18 at 09:54

It took me a long time to figure out how to change the background color of tabs, by overriding material design. I don't know where to share my end result, so here it goes:

For the .ts file:

@Component({
  selector: 'app-tabs',
  templateUrl: './tabs.component.html',
  styleUrls: ['./tabs.component.css'],
  encapsulation: ViewEncapsulation.None
})

For the css file:

.mat-tab-labels, .mat-tab-label, .mat-tab-link {
  color: white;
  font-size: 16px;
  background-color: #804A71;
}

.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar{
  background: white;
  height: 5px; 
}

So this is both the backgroundcolor, the color and size of the text (label), and the tabs bar under the text. It finally worked when I used both .mat-tab-labels and .mat-tab-label.

score 1 · Answer 6 · answered Mar 18 '21 at 19:34

You can also style default material classes by using the ::ng-deep pseudo element.

:host ::ng-deep .mat-tab-label {
    border-width: 9px;
    border-style: solid;
    border-color: orange;
  }

The :host is optional, that scopes the styles to the tabs in the current component.

score 0 · Answer 7 · answered Jul 31 '23 at 09:30

Use browser inspect tool and try to change below css elements. Those elements will change tabs background colors when active and inactive and label texts colors also.

<mat-tab-group class="angular_tabs" preserveContent>
    <mat-tab label="First"> Content 1 </mat-tab>
    <mat-tab label="Second"> Content 2 </mat-tab>
    <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

.mat-mdc-tab-group, .mat-mdc-tab-nav-bar{
    --mat-tab-header-active-focus-label-text-color: #151414;
    --mat-tab-header-active-label-text-color : #151414;
    --mat-tab-header-inactive-label-text-color: rgb(0 0 0 / 60%);
    --mat-tab-header-inactive-focus-label-text-color: rgb(236 131 218 / 60%);
    --mat-tab-header-inactive-hover-label-text-color : rgb(236 131 218 / 60%);
    --mdc-tab-indicator-active-indicator-color: #242022;
    --mat-tab-header-active-hover-label-text-color: #5052c3;
    --mat-tab-header-active-ripple-color: #c2185b;
    --mat-tab-header-inactive-ripple-color: #232222;
}

Angular Material customize tab

7 Answers7

Update

Old answer with ::ng-deep

styles.css

Linked