如何为Angular Material 9的不同标签设置单独背景色

步骤1：在模板中为每个Tab添加自定义类 #

修改你的mat-tab-group模板，给每个mat-tab的标签部分添加专属类名：

<mat-tab-group>
  <mat-tab label="Completed" class="completed-tab">
    <!-- 标签内容区域 -->
  </mat-tab>
  <mat-tab label="Overdue" class="overdue-tab">
    <!-- 标签内容区域 -->
  </mat-tab>
  <mat-tab label="Extended" class="extended-tab">
    <!-- 标签内容区域 -->
  </mat-tab>
</mat-tab-group>

步骤2：添加自定义CSS样式 #

在组件的样式文件（如your-component.component.scss）中写入以下样式，利用::ng-deep穿透Angular的样式封装，同时用:host限定样式仅作用于当前组件：

:host ::ng-deep {
  /* Completed标签样式 */
  .completed-tab .mat-tab-label {
    background-color: #4CAF50; /* 基础绿色 */
    color: white;
    margin-right: 8px;
    border-radius: 4px 4px 0 0;
  }
  .completed-tab.mat-tab-label-active {
    background-color: #388E3C; /* 选中时的深绿色 */
  }

  /* Overdue标签样式 */
  .overdue-tab .mat-tab-label {
    background-color: #F44336; /* 基础红色 */
    color: white;
    margin-right: 8px;
    border-radius: 4px 4px 0 0;
  }
  .overdue-tab.mat-tab-label-active {
    background-color: #D32F2F; /* 选中时的深红色 */
  }

  /* Extended标签样式 */
  .extended-tab .mat-tab-label {
    background-color: #795548; /* 基础棕色 */
    color: white;
    border-radius: 4px 4px 0 0;
  }
  .extended-tab.mat-tab-label-active {
    background-color: #5D4037; /* 选中时的深棕色 */
  }

  /* 可选：移除默认下划线，让自定义背景更协调 */
  .mat-tab-link-active::after {
    display: none;
  }
}

补充说明 #

• 颜色值可根据你的视觉需求自行替换
• 保留margin-right和border-radius是为了让标签间有间隔、顶部边角圆润，可按需调整
• 选中状态的深色系是为了区分标签的激活状态，提升交互体验

内容的提问来源于stack exchange，提问作者nimesh madusanka