时间戳

首页 > 解决方案 > 自定义表格上的 CSS 材质选项卡不起作用

css - 自定义表格上的 CSS 材质选项卡不起作用

问题描述

在我的 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在工作。我只想自定义选项卡单元格而不是整个选项卡组。有任何想法吗？

标签： cssangularangular-materialangular5

解决方案

按照我的评论：使用ng-template垫标签的属性来自定义它们。堆栈闪电战

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

推荐阅读