0

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

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

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

tab-group-basic-example.ts

    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 {}
user15084286
  • 31
  • 2
  • 8
  • Where did you add the styles? Can you share your CSS or SASS? – Dalorzo Jan 27 '21 at 03:33
  • tab-group-basic-example.css file in this [stackbitz example](https://stackblitz.com/edit/add-custom-styles-only-to-parent-mat-tab-group?file=src/app/tab-group-basic-example.html) @Dalorzo – user15084286 Jan 27 '21 at 03:38

3 Answers3

1

I should target only the header that is a child of the top-most parent. E.g. I tried changing the selector to .parent-tab-group > .mat-tab-header .mat-tab-label and it worked for me.

Reference: https://github.com/angular/components/issues/21710#issuecomment-770970418

user15084286
  • 31
  • 2
  • 8
0

You can using ::ng-deep

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

For css

::ng-deep .parent-tab-group .mat-tab-label {
  // style here
}
Anh Le
  • 270
  • 1
  • 9
0

Try Using:

<mat-tab-group mat-stretch-tabs backgroundColor="primary">
    <mat-tab aria-label="primary" 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-group>

and in css add the following

[aria-label=primary] {
    min-width: 25px !important;
    padding: 5px;
      background-color: orange;
      font-weight: 700;
}

I edited you demo

https://stackblitz.com/edit/add-custom-styles-only-to-parent-mat-tab-group-1c44os?file=src%2Fapp%2Ftab-group-basic-example.html

I think this will help you

Msk Satheesh
  • 1,398
  • 1
  • 6
  • 7