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

Solution 1

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

Solution 2

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

Solution 3

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

Solution 4

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

Solution 5

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.

View more solutions

Comments

[Desu]

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.

[Faisal]

set background-color to color you want in .mat-tab-label class. See this updated plunker: plnkr.co/edit/Vq5LYJIdY8IFfRMVi7Fv?p=preview

[core114]

@Faisal Sir, I was implemented your code part but is it not work for me

[user12]

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

[Hypenate]

::ng-deep is going to be deprecated. ViewEncapsulation is the way to go.

[JF Gagnon]

Looking at your demo, how to prevent label movement when clicked?

[lakshman_dev]

Perfecto! Thank you.

[lakshman_dev]

Avoid giving padding. It will do. @JFGagnon

[Gel]

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...

[HDJEMAI]

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.

[Rehmanali Momin]

That was a life saver. Angular community should put such answers in its important links list.

[Rehmanali Momin]

@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.

[Anh Hoang]

@Gel Incase set the encapsulation as None, just make the selectors in that component specific (set class for example)

[antia]

Or instead of using ViewEncapsulation.None, you can also use :host with ::ng-deep on css

[J A S K I E R]

background-color: transparent; is the most important line :)

[aruno]

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 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.

[fuliozor]

this still is working but you need replace /deep/ to :ng-deep