在我的angular 5应用程序中,我使用的是Material API。
我有一个包含2个标签的表:
<mat-tab-group>
<mat-tab>
<mat-table>
<!-- some stuff -->
</mat-table>
</mat-tab>
<mat-table>
<!-- some stuff -->
</mat-table>
</mat-tab>
</mat-tab-group>
我尝试自定义<mat-tab>
组件的CSS,但它无法正常工作,我逐一尝试了所有这些:
.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;
}
只有.mat-tab-group
工作。我想只自定义选项卡单元格而不是整个选项卡组。有任何想法吗?
根据我的评论:使用mat选项卡的ng-template
属性来自定义它们。 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;
}