如何不使用::ng-deep和!important设置mat-tab样式？

我完全理解你不想依赖::ng-deep和!important的心态——这些写法不仅打破了Angular组件样式隔离的设计初衷，长期维护下来还很容易引发样式冲突。针对Angular Material的mat-tab组件，这里有几个更优雅且符合最佳实践的方案：

1. 自定义类 + 全局样式文件 #

这是最直观的方案，既能精准控制目标组件的样式，又不会污染全局所有mat-tab：

• 第一步，给你的mat-tab-group添加一个专属自定义类：

  <mat-tab-group class="user-profile-tabs">
    <mat-tab label="基本信息"></mat-tab>
    <mat-tab label="账户设置"></mat-tab>
  </mat-tab-group>
  

• 第二步，在全局样式文件（比如styles.scss或styles.css）中编写样式，全局样式不受组件封装限制，无需::ng-deep：

  .user-profile-tabs .mat-tab-label {
    background-color: #f5f5f5;
    color: #444;
    padding: 0 32px;
    font-weight: 500;
  }
  
  .user-profile-tabs .mat-tab-label-active {
    background-color: #1976d2;
    color: white;
  }
  

2. 使用CSS变量（自定义属性） #

Angular Material许多组件都原生支持通过CSS变量修改样式，这是官方推荐的轻量方案：

• 先通过开发者工具查看mat-tab-label元素上的可用CSS变量（通常以--mat-tab-开头），然后在组件的样式文件中直接覆盖：

  :host {
    /* 修改默认标签文字颜色 */
    --mat-tab-label-text-color: #444;
    /* 修改激活状态标签文字颜色 */
    --mat-tab-label-active-text-color: #1976d2;
    /* 修改标签背景色 */
    --mat-tab-label-background-color: #f5f5f5;
  }
  

• 这种方式完全遵循组件样式隔离规则，不需要全局样式，也不会影响其他组件的mat-tab。

3. 自定义Angular Material主题 #

如果你的应用需要统一修改mat-tab的全局样式，自定义主题是最规范的做法：

• 在你的Material主题文件（比如theme.scss）中，扩展mat-tab的主题配置：

  @use '@angular/material' as mat;
  
  // 自定义tab组件的主题参数
  $custom-tab-theme: mat.define-component-theme(
    mat.$tab-theme,
    (
      color: (
        primary: mat.define-palette(mat.$blue-palette),
        text: (
          label: rgba(0, 0, 0, 0.87),
          active: mat.get-color-from-palette(mat.$blue-palette, 700)
        )
      ),
      typography: mat.define-typography-config(
        label: mat.define-typography-level(14px, 20px, 500)
      )
    )
  );
  
  // 应用自定义tab主题
  @include mat.tab-theme($custom-tab-theme);
  

• 将这个主题文件引入到全局样式中，就能让所有mat-tab组件自动应用新样式，适合需要整体风格统一的场景。

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