如何自定义Angular Material 14的激活态蓝色标签栏？

针对Angular Material 14的标签激活态指示器（蓝色栏），可以通过两种方式自定义：

方式一：组件内穿透修改样式 #

由于Angular组件默认启用视图封装，需要使用::ng-deep穿透样式隔离，在组件的CSS文件中添加：

::ng-deep .mat-mdc-tab-group .mat-mdc-tab-header .mat-mdc-tab-active .mat-mdc-tab-header-item::after {
  background-color: #ff5722; /* 替换为你需要的颜色 */
  height: 3px; /* 可选：调整指示器高度 */
}

注意：Angular Material 14采用MDC架构，类名以mat-mdc-开头，不要使用旧版本的mat-tab类名。

方式二：通过自定义主题修改（推荐） #

更符合Material设计规范的方式是在全局主题文件（如styles.scss）中配置：

@use '@angular/material' as mat;

// 定义自定义主题
$custom-theme: mat.define-theme(
  (
    color: (
      primary: mat.define-palette(mat.$indigo-palette),
      accent: mat.define-palette(mat.$pink-palette),
      warn: mat.define-palette(mat.$red-palette),
      // 配置标签指示器颜色
      tabs: (
        indicator-color: #4caf50
      )
    )
  )
);

// 应用主题到所有组件
@include mat.all-component-themes($custom-theme);

如果只想单独修改标签组件的指示器，也可以单独引入标签主题并配置：

@use '@angular/material/tabs' as mat-tabs;

@include mat-tabs.tab-theme($custom-theme, (
  indicator-color: #4caf50
));

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