Apply custom styles only the parent mat-tab-group

I want to apply some custom styles only to the parent mat-tab-group without effecting to the child mat-tab-groups. So, I tried to add a custom class only to the parent mat-tab-group but it doesn't work. Is there any way to achieve this?

A stackbitz example of the problem :- Demo

Actual project's

• Angular Version - 8.2.14
• Angular Material Version - 8.2.3

Stackbitz Example's Source Code:

tab-group-basic-example.html and tab-group-basic-example.css

.parent-tab-group .mat-tab-label {    color: white;    min-width: 25px !important;    padding: 5px;    background-color: orange;    font-weight: 700;  }

<mat-tab-group mat-stretch-tabs class="parent-tab-group">    <mat-tab label="P1">      <mat-tab-group mat-stretch-tabs>        <mat-tab label="P1 - C1"> Parent 1 - Child 1 </mat-tab>        <mat-tab label="P1 - C2"> Parent 1 - Child 2 </mat-tab>        <mat-tab label="P1 - C3"> Parent 1 - Child 3 </mat-tab>      </mat-tab-group>    </mat-tab>    <mat-tab label="P2">      <mat-tab-group mat-stretch-tabs>        <mat-tab label="P2 - C1"> Parent 2 - Child 1 </mat-tab>        <mat-tab label="P2 - C2"> Parent 2 - Child 2 </mat-tab>        <mat-tab label="P2 - C3"> Parent 2 - Child 3 </mat-tab>      </mat-tab-group>    </mat-tab>    <mat-tab label="P3">      <mat-tab-group mat-stretch-tabs>        <mat-tab label="P3 - C1"> Parent 3 - Child 1 </mat-tab>        <mat-tab label="P3 - C2"> Parent 3 - Child 2 </mat-tab>        <mat-tab label="P3 - C3"> Parent 3 - Child 3 </mat-tab>      </mat-tab-group>    </mat-tab>  </mat-tab-group>

import { Component, ViewEncapsulation } from "@angular/core";    @Component({    selector: "tab-group-basic-example",    templateUrl: "tab-group-basic-example.html",    styleUrls: ["./tab-group-basic-example.css"],    encapsulation: ViewEncapsulation.None  })  export class TabGroupBasicExample {}  

https://stackoverflow.com/questions/65912530/apply-custom-styles-only-the-parent-mat-tab-group January 27, 2021 at 11:29AM