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?

Answer 1

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.

Answer 2

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.