如何为不同的mat-tabs设置不同样式的.mat-ink-bar

核心逻辑是通过激活的选项卡索引，给mat-tabs父容器动态绑定自定义类，再通过类选择器覆盖对应状态下的.mat-ink-bar样式。

方案1：带TS逻辑的标准实现 #

步骤1：编写模板代码 #

在组件html文件中绑定激活索引与动态类：

<mat-tabs 
  [selectedIndex]="activeTabIndex"
  (selectedIndexChange)="onTabChange($event)"
  [ngClass]="{
    'tab-ink-green': activeTabIndex === 0,
    'tab-ink-red': activeTabIndex === 1
  }"
>
  <mat-tab label="内容1">内容1区域</mat-tab>
  <mat-tab label="内容2">内容2区域</mat-tab>
</mat-tabs>

步骤2：编写组件TS逻辑 #

在component.ts中定义索引变量与切换方法：

import { Component } from '@angular/core';

@Component({
  selector: 'app-tab-demo',
  templateUrl: './tab-demo.component.html',
  styleUrls: ['./tab-demo.component.scss']
})
export class TabDemoComponent {
  // 默认选中第一个选项卡
  activeTabIndex = 0;

  onTabChange(index: number): void {
    this.activeTabIndex = index;
  }
}

步骤3：编写覆盖样式 #

你可以选择两种方式写样式：

• 方式A：写在组件样式文件中，需要加::ng-deep突破Angular样式隔离：

::ng-deep {
  .tab-ink-green .mat-ink-bar {
    background-color: green !important;
  }
  .tab-ink-red .mat-ink-bar {
    background-color: red !important;
  }
}

• 方式B：写在项目全局样式文件（通常是styles.scss/styles.css）中，不需要加::ng-deep：

.tab-ink-green .mat-ink-bar {
  background-color: green !important;
}
.tab-ink-red .mat-ink-bar {
  background-color: red !important;
}

方案2：无TS逻辑的轻量化实现 #

如果不想写TS代码，可以直接通过模板引用变量绑定索引，不需要额外定义TS变量和方法：

<mat-tabs #tabRef [ngClass]="{
  'tab-ink-green': tabRef.selectedIndex === 0,
  'tab-ink-red': tabRef.selectedIndex === 1
}">
  <mat-tab label="内容1">内容1区域</mat-tab>
  <mat-tab label="内容2">内容2区域</mat-tab>
</mat-tabs>

样式部分和方案1完全一致。

注意事项 #

• !important用于覆盖Angular Material自带的默认样式优先级，如果你自定义样式的选择器优先级足够高可以省略
• 如果有更多选项卡，只需要在ngClass配置中新增对应索引的类名，再补充对应样式即可

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