如何为mat-tab-group内的mat-tabs按条件应用自定义样式？

要给mat-tab-group内的部分mat-tabs根据条件应用自定义样式，核心问题是直接给<mat-tab>元素添加类不会作用到实际渲染的tab按钮上——因为Angular Material会将<mat-tab>转换为隐藏的组件元素，实际可交互的tab按钮是由mat-tab-group动态生成的<button class="mdc-tab">元素。以下是具体解决方案：

方法1：通过组件逻辑动态添加类（推荐，适配动态数据场景） #

步骤1：组件代码实现 #

在组件中获取mat-tab-group实例，根据条件给对应的tab按钮添加自定义类：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { MatTabGroup } from '@angular/material/tabs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements AfterViewInit {
  @ViewChild(MatTabGroup) tabGroup!: MatTabGroup;
  // 模拟带条件的tab数据
  tabs = [
    { label: '基础样式Tab', isCustom: false },
    { label: '自定义样式Tab1', isCustom: true },
    { label: '自定义样式Tab2', isCustom: true }
  ];

  ngAfterViewInit() {
    // 获取所有tab按钮元素
    const tabButtons = this.tabGroup._elementRef.nativeElement.querySelectorAll('.mdc-tab');
    // 遍历tab数据，给满足条件的按钮添加类
    this.tabs.forEach((tab, index) => {
      if (tab.isCustom && tabButtons[index]) {
        tabButtons[index].classList.add('custom-tab');
      }
    });
  }
}

步骤2：模板代码 #

绑定tab数据到mat-tab-group：

<mat-tab-group class="round-tabs">
  <mat-tab *ngFor="let tab of tabs" [label]="tab.label">
    {{tab.label}} 内容区域
  </mat-tab>
</mat-tab-group>

步骤3：全局样式定义 #

在styles.scss中扩展原有样式，添加自定义tab的样式规则：

.mat-mdc-tab-group.round-tabs,
.mat-mdc-tab-nav-bar.round-tabs {
  .mdc-tab {
    border: 1px solid gray;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    background-color: yellow;
  }

  // 条件自定义样式
  .mdc-tab.custom-tab {
    background-color: orange;
    border-color: darkorange;
    font-weight: bold;
  }
}

方法2：使用自定义标签模板（仅样式tab标签区域） #

如果只需要样式tab的标签文本区域，可以通过mat-tab-label自定义模板：

<mat-tab-group class="round-tabs">
  <mat-tab>
    <ng-template mat-tab-label>
      <span>基础样式Tab</span>
    </ng-template>
    基础内容
  </mat-tab>
  <mat-tab>
    <ng-template mat-tab-label>
      <span [class.custom-label]="true">自定义标签Tab</span>
    </ng-template>
    自定义内容
  </mat-tab>
</mat-tab-group>

样式：

.mat-mdc-tab-group.round-tabs .custom-label {
  color: red;
  font-size: 1.1rem;
}

注意事项 #

1. 视图封装问题：如果将自定义样式写在组件内的scss文件中，需要添加::ng-deep穿透Angular的视图封装（不推荐长期使用，建议优先使用全局样式）：

   :host ::ng-deep .mat-mdc-tab-group.round-tabs .mdc-tab.custom-tab {
     background-color: orange;
   }
   

2. 动态tab场景：如果tab是动态添加/删除的，需要在tab变化后重新执行添加类的逻辑，比如在ngAfterContentChecked钩子中处理，或通过Observable监听tab数据变化。

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