Within my Angular 5 application, I have implemented the Material API.
One of the components in my project is a table with 2 tabs structured like this:
<mat-tab-group>
<mat-tab>
<mat-table>
<!-- content -->
</mat-table>
</mat-tab>
<mat-tab>
<mat-table>
<!-- content -->
</mat-table>
</mat-tab>
</mat-tab-group>
I attempted to customize the CSS of the <mat-tab> component but was unable to achieve the desired result. Here are the styles I tried 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;
}
Out of these styles, only .mat-tab-group had an effect. I am looking to specifically customize the tab cell without affecting the entire tab group. Any suggestions or solutions?