CODEWITHSUNDEEP
cssangularangular-materialangular5
Logan Wlv
Logan Wlv

Reputation: 3744

Customizing CSS material tab on a table does not work

In my angular 5 application, I am using Material API.

I have a table with 2 tabs like that: 

<mat-tab-group>
  <mat-tab>
    <mat-table>
     <!-- some stuff -->
    </mat-table>
  </mat-tab>
    <mat-table>
     <!-- some stuff -->
    </mat-table>
  </mat-tab>
</mat-tab-group>

I try to customize the css of <mat-tab> component but it is not working, I tried all of that one by one : 

.mat-tab-label-active {
    color: rgb(255, 255, 255) !important;
    background-color: red !important;
  }

  .mat-tab-nav-bar {
    color: rgb(255, 255, 255) !important;
    background-color: red !important;
  }

  .mat-tab-group {
    color: rgb(255, 255, 255) !important;
    background-color: rgba(19, 23, 63, 0.993) !important;
 }

only .mat-tab-group is working. I would like to customize only the tab cell and not the whole tab-group. Any ideas?

Upvotes: 0

Views: 1185

Answers (1)

user4676340
user4676340

Reputation:

Following my comments : use the ng-template property of the mat tabs to customize them. Stackblitz

<mat-tab-group>
  <mat-tab label="First">
    <ng-template mat-tab-label>
      <span class="customized-label">
        This is a customized label
      </span>
    </ng-template>
  </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

.customized-label {
  color: red;
  font-weight: 700;
}

Upvotes: 1

Related Questions