Angular 17中Angular Material Tabs静态下划线缺失问题求助

1. 确认全局主题样式正确配置 #

Angular Material的Tabs组件依赖主题样式渲染静态下划线，首先检查全局样式文件（如styles.scss）是否正确引入了Material主题：

@use '@angular/material' as mat;

@include mat.core();

// 定义主题色板
$app-primary: mat.define-palette(mat.$indigo-palette);
$app-accent: mat.define-palette(mat.$pink-palette);
$app-warn: mat.define-palette(mat.$red-palette);

// 创建浅色主题
$app-theme: mat.define-light-theme((
  color: (
    primary: $app-primary,
    accent: $app-accent,
    warn: $app-warn,
  )
));

// 引入所有组件主题样式
@include mat.all-component-themes($app-theme);

如果只想引入Tabs相关样式，可替换最后一行：

@include mat.tab-group-theme($app-theme);
@include mat.tab-group-typography($app-theme);

2. 修复组件样式封装影响 #

若组件启用了ViewEncapsulation.None或自定义样式覆盖了默认样式，可在组件样式文件中添加以下代码强制显示下划线：

.mat-mdc-tab-group .mat-mdc-tab-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

注意：Angular 15+默认使用MDC架构的组件，类名前缀为mat-mdc-，若你用的是旧版非MDC组件，替换类名为mat-tab-group和mat-tab-header。

3. 确保Angular与Material版本匹配 #

版本不兼容会导致样式缺失，检查package.json中两者版本均为17.x：

"@angular/material": "^17.0.0",
"@angular/core": "^17.0.0",
"@angular/cdk": "^17.0.0"

版本不一致时执行更新：

npm install @angular/material@17 @angular/cdk@17

4. 排查自定义样式覆盖 #

检查全局或组件内的样式是否存在如下覆盖规则，找到后删除：

.mat-mdc-tab-header {
  border-bottom: none !important;
}

5. 确认使用标准Tab Group组件 #

确保你的模板使用的是未修改结构的基础组件：

<mat-tab-group>
  <mat-tab label="标签1">内容1</mat-tab>
  <mat-tab label="标签2">内容2</mat-tab>
</mat-tab-group>

内容的提问来源于stack exchange，提问作者Bill D.