Angular Material 14迁移至15后自定义样式覆盖失效求助

问题根源 #

Angular Material 15彻底切换到了MDC（Material Design Components）底层框架，组件的DOM结构、CSS类名和样式优先级都做了大幅调整，之前针对旧组件写的自定义样式选择器要么匹配不到新结构，要么优先级低于MDC的默认样式，导致被覆盖。

具体修复方案 #

1. 替换CSS类名 #

MDC组件替换了所有旧的类名，举几个核心组件的对应关系：

• 输入框：旧类mat-input-container → 新类mdc-text-field；旧类mat-input-element → 新类mdc-text-field__input
• 选择器：旧类mat-select → 新类mdc-select；旧类mat-select-panel → 新类mdc-select__menu
• 自动补全：旧类mat-autocomplete-panel → 新类mdc-autocomplete

把自定义样式里的旧类名全部替换成对应的新类名，同时注意组件内部嵌套结构的变化，比如输入框的标签、下划线元素的类名也都更新了。

2. 提升样式优先级 #

如果换了类名还是被覆盖，可以试试这几种方式：

• 写更具体的选择器，比如结合组件的宿主类：.user-form .mdc-text-field__input
• 配合:host使用::ng-deep限定作用范围（避免全局污染）：

  :host ::ng-deep .mdc-text-field__input {
    font-family: "自定义字体", sans-serif;
    color: #2d2d2d;
  }
  

• 直接覆盖MDC的CSS变量（推荐），Angular Material 15主题全靠CSS变量控制，全局或组件内都能改：

  :root {
    --mdc-text-field-input-text-color: #2d2d2d;
    --mdc-text-field-label-color: #666;
  }
  

3. 更新主题配置 #

旧的主题语法在15里已经失效，要换成MDC的主题定义方式：

@use '@angular/material' as mat;

// 定义调色板
$my-primary: mat.define-palette(mat.$indigo-palette);
$my-accent: mat.define-palette(mat.$pink-palette);
// 创建MDC主题
$my-theme: mat.define-mdc-theme($my-primary, $my-accent);

// 全局应用主题
@include mat.all-component-themes($my-theme);

确保主题文件用了新的define-mdc-theme和all-component-themes函数，这样自定义的主题设置才能生效。

4. 手动检查迁移后的组件 #

虽然跑了自动迁移命令，但还是要核对模板代码：

• 确认旧组件指令换成了MDC版本，比如mat-input→mat-mdc-input，mat-select→mat-mdc-select
• 模板里手动加的样式类也要同步更新，比如原来的class="mat-input"改成class="mdc-text-field"

官方参考内容 #

Angular Material官方文档里有专门的MDC迁移样式适配章节，重点看这几块：

• 组件样式映射表：每个组件都列了旧类名到新类名的对应关系
• CSS变量参考：所有可自定义的MDC主题变量清单
• 主题系统更新指南：手把手教你把旧主题转换成新的MDC主题系统

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