Angular 15升17（含Material/CDK）CSS选择器变更列表查询

核心资源与工具 #

• Angular Material官方每个组件的迁移文档中，都附带了旧→新CSS选择器的精准对应表，比如按钮、卡片、输入框等组件的专属迁移页，会明确列出类名变更细节，比全局正则替换更可靠。
• 运行官方补充迁移命令：ng generate @angular/material:mdc-migration --css，该命令会针对CSS文件执行更细致的选择器替换，覆盖基础自动化脚本未处理的场景。

高频选择器映射示例 #

以下是升级中最常遇到的类名对应关系：

• 按钮组件：.mat-button→.mat-mdc-button；.mat-raised-button→.mat-mdc-raised-button
• 卡片组件：.mat-card→.mat-mdc-card；.mat-card-title→.mat-mdc-card-title
• 表单组件：.mat-form-field→.mat-mdc-form-field；.mat-input→.mat-mdc-input-element
• 工具栏组件：.mat-toolbar→.mat-mdc-toolbar；.mat-toolbar-row→.mat-mdc-toolbar-row
• CDK关联组件：.mat-scrollable→.cdk-scrollable；.mat-dialog-container→.mat-mdc-dialog-container

高效手动处理技巧 #

• 用IDE多光标+精准正则组合替换：比如匹配.mat-(button|card|toolbar)这类特定前缀，替换为.mat-mdc-$1，避免误改保留.mat-前缀的特殊辅助类。
• 借助浏览器开发者工具：直接查看页面元素的新类名，对照修改遗留CSS，比逐页翻文档效率更高。

内容的提问来源于stack exchange，提问作者weihs.th