是否有方法为Angular Material mat-tab组件的每个标签设置不同下划线颜色

问题背景 #

你当前使用mat-tab组件时，希望为每个标签设置专属的选中下划线颜色，尝试传入backgroundColor属性、监听selectedTabChange事件的方式未达到预期效果，原有示例代码如下：

<mat-tab-group backgroundColor="green" mat-align-tabs="center" dynamicHeight headerPosition="below" (selectedTabChange)="onTabChanged($event)">
  <mat-tab label='IPV Model'>Content</mat-tab>
  <mat-tab label='IPV Market Data'>Content</mat-tab>
  <mat-tab label='Collateral'>Content</mat-tab>
  <mat-tab label='Fair Value Level'>Content</mat-tab>
</mat-tab-group>

实现原理 #

mat-tab组件的选中下划线本质是一个全局共享的ink-bar元素，会根据当前选中tab的位置自动平移，没有为每个tab生成独立的下划线节点。因此需要通过动态联动当前选中tab索引、自定义CSS变量动态传值的方式，给这个共享的下划线元素设置不同的背景色。

具体实现步骤 #

• 移除无效的内置属性
  原有代码里的backgroundColor="green"不是mat-tab-group支持的官方配置项，传入后仅会被渲染为元素的普通DOM属性，完全不会影响组件内部样式，需要先删除。
• 组件类维护状态与颜色映射
  在对应组件的TypeScript代码中，维护两个核心状态：
  1. 当前选中的tab索引，默认初始值为0
  2. tab索引与专属下划线色值的映射表
     示例代码：

  import { MatTabChangeEvent } from '@angular/material/tabs';
  
  // 当前选中的tab索引
  selectedTabIndex = 0;
  // 每个tab对应的下划线颜色映射，可根据业务需求自由调整
  tabColorMap: Record<number, string> = {
    0: '#16a34a',
    1: '#2563eb',
    2: '#d97706',
    3: '#dc2626'
  };
  
  onTabChanged(event: MatTabChangeEvent) {
    // 选中tab切换时同步更新索引
    this.selectedTabIndex = event.index;
  }
  

• HTML模板绑定动态CSS变量
  在mat-tab-group元素上绑定自定义CSS变量，变量值从颜色映射表中根据当前选中索引取值：

  <mat-tab-group 
    mat-align-tabs="center" 
    dynamicHeight 
    headerPosition="below" 
    [style.--tab-ink-color]="tabColorMap[selectedTabIndex]"
    (selectedTabChange)="onTabChanged($event)">
    <mat-tab label='IPV Model'>Content</mat-tab>
    <mat-tab label='IPV Market Data'>Content</mat-tab>
    <mat-tab label='Collateral'>Content</mat-tab>
    <mat-tab label='Fair Value Level'>Content</mat-tab>
  </mat-tab-group>
  

• 样式穿透设置下划线样式
  由于Angular组件默认的样式作用域隔离机制，需要通过::ng-deep穿透到组件内部，给实际的下划线元素设置动态获取到的CSS变量作为背景色：

  ::ng-deep .mat-mdc-tab-group .mat-mdc-tab-header .mat-mdc-ink-bar {
    background-color: var(--tab-ink-color, currentColor) !important;
  }
  

  注意：如果使用的是Angular Material 15以下的旧版本，对应的类名为mat-ink-bar，需要把选择器调整为.mat-tab-group .mat-tab-header .mat-ink-bar即可。

常见注意事项 #

• 直接给单个mat-tab元素设置下划线样式无法生效，因为选中下划线是全局共享的平移元素，并非每个tab独立渲染
• 选择器需要精准命中ink-bar节点，避免错选到tab的涟漪波纹元素，否则会出现波纹颜色变化、下划线颜色不变的问题
• 如果项目开启严格样式隔离规则，可直接把对应样式写到全局样式文件中，无需添加::ng-deep即可生效

内容的提问来源于stack exchange，提问作者Mariano Caldara