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

Answer 1

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

Answer 2

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

Answer 3

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.

Answer 4

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

Answer 5

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

Answer 6

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.

Answer 7

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