How do I use CSS to style Angular Material tabs?

Question

I am very new to Angular. I recently added Angular Material tab in my app project similar to the one below.

<mat-tab-group>
  <mat-tab label="First"  class="firstTab"> Content 1 </mat-tab>
  <mat-tab label="Second" class="secondTab"> Content 2 </mat-tab>
  <mat-tab label="Third"  class="thirdTab"> Content 3 </mat-tab>
</mat-tab-group>

In my app, I sometimes need to bring certain tabs to a user's attention. The approach I was thinking of, is by highlighting the tab of interest by giving it the below qualities:

.highLightTab{
   border-width: 9px;
   border-style: solid;
   border-color: orange;
}

The traditional way to achieve the above would be through

$(".secondTab").addClass("highLightTab");

However, this is proving impossible to achieve as am not able to customized CSS classes/CSS styling to any of the Mat-X elements that are generated during runtime.

Can anyone kindly tell me how to achieve this?

Might want to take a look at material.angular.io/guide/theming — Heretic Monkey
– Heretic Monkey, Commented Oct 24, 2019 at 20:38

C.OG · Accepted Answer · 2019-10-25 09:53:46Z

17

To add a custom class to your material tabs, you have to use the ng-template syntax:

<mat-tab-group>
    <mat-tab>
        <ng-template mat-tab-label>
            <span class="my-custom-class">Security</span>
        </ng-template>
        Content 1
    </mat-tab>
    <mat-tab label="Second" class="secondTab"> Content 2 </mat-tab>
    <mat-tab class="my-custom-class" label="Third" class="thirdTab"> Content 3 </mat-tab>
</mat-tab-group>

With this, you can style your my-custom-class as you normally would:

.my-custom-class {
  border-width: 9px;
  border-style: solid;
  border-color: red;
}

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

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

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

Attached is the stackblitz demo.

edited Oct 25, 2019 at 9:53

answered Oct 24, 2019 at 20:41

C.OG

6,5373 gold badges24 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SirBT Over a year ago

thank you for your posted solution, however, your solution only gives these CSS properties to the active tab .mat-tab-label-active, I would like to know how I can give these properties to other tabs that are NOT active .mat-tab-label in order to bring my user's attention to that particular tab. Would you know how to achieve this?

C.OG Over a year ago

Ive updated the stackblitz to show how to add a custom class, I'll edit my answer to reflect this also

Jorge Mussato · Accepted Answer · 2019-10-24 20:57:27Z

3

I don't recommend using ng-deep as it is deprecated:

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

Instead, you should style it as the angular material docs:

https://material.angular.io/guide/theming

Since you will probably have a lot of custom styles for your material componentes, its a better aproach, and you can centralize all of the material custom styles in a single scss file if you want.

Example of a implementation (not tested, but it should work):

my-custom-elements.scss

@import '~@angular/material/theming';

@mixin custom-tabs-theme() {
  .mat-tab-label-active  {
    border-width: 9px;
    border-style: solid;
    border-color: orange;
  }
}

global-material-theme.scss

@import '~@angular/material/theming';
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();

@import './material/my-custom-elements.scss';

@include custom-tabs-theme();

angular.json

...
"styles": ["src/styles.scss", "src/app/global-material-theme.scss"]
...

Note: You can edit any material css class this way.

answered Oct 24, 2019 at 20:57

Jorge Mussato

2,5942 gold badges13 silver badges20 bronze badges

4 Comments

C.OG Over a year ago

This is a nice answer, but till there is an alternative to ::ng-deep i still prefer it, avoid having to have global styles.

SirBT Over a year ago

@Jorge Mussato thank you for your elaborate solution. Though very complex, I don't think I made my self Christal clear. I merely wanted a solution that would enable me to highlight any tab in order to bring users attention to its content. For instance, if I wanted to bring the users attention to the Third tab, I should, for instance, be able to run a similar code $(".thirdTab").addClass("mat-tab-label-active2");. How do I achieve this?

Jorge Mussato Over a year ago

You can do this aswell. Just set a ngClass in each tab, and in the my-custom-element.scss you add .mat-tab-label.highlight-this class. Also, in the html you use some kind of [ngClass]="{highlight-this: condition}". This condition will make your tab highlight when you set it to true. Don't know if I made myself clear.

Jorge Mussato Over a year ago

@C_Ogoo ::ng-deep is also a solution, but in my experience using it in a big project, things get lost and disorganized, but for smaller projects I guess it is a good alternative. I prefer not using it because its deprecated and I learned the "material docs" way

BernieSF · Accepted Answer · 2025-02-13 15:02:23Z

0

This is an old question, but for anyone out there using Angular v13 or above, now there are @input parameters (labelClass and bodyClass) that helps to add easily a class to your mat-tab

<mat-tab-group>
  <mat-tab labelClass="myTabClass">
     <ng-template mat-tab-label> First Tab </ng-template>
     <ng-template matTabContent >
         <p>here goes the content</p>
     </ng-template>

  </mat-tab>
</mat-tab-group>

then in your styles.css file create a class with your css code

.myTabClass{ background-color: #f2f2f2 !important }

answered Feb 13 at 15:02

BernieSF

1,8582 gold badges31 silver badges46 bronze badges

Collectives™ on Stack Overflow

How do I use CSS to style Angular Material tabs?

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related