升级Angular Material版本：如何获取所有CSS与UI变更？

以下是几种高效获取目标版本样式变更的方法：

• 查阅GitHub仓库的提交与版本对比
  直接访问Angular Material的GitHub仓库，通过标签筛选v10（如10.2.7）和v12（如12.2.17）的稳定分支，使用仓库的版本对比功能，过滤出src/lib目录下各组件的样式文件（.scss/.css）差异。也可以通过提交搜索，输入组件名+样式关键词（比如mat-checkbox display）快速定位具体变更。

• 梳理官方破坏性变更文档
  Angular Material每个大版本的发布说明都会列出Breaking Changes，虽然不会逐条罗列CSS属性，但会明确说明影响UI的重大调整（比如组件布局逻辑、默认样式规则修改）。重点查看v11和v12版本的该章节，这些内容能帮你定位样式变更的核心原因。

• 本地搭建版本对比环境
  分别创建基于Angular Material v10和v12的测试项目，引入你项目中用到的所有组件，编译后提取各自的全局CSS文件，用文件对比工具（如VS Code的Compare Files插件）直接对比两份CSS的差异，快速批量找出所有组件的样式变更点。

问题背景参考：
从Angular v11升级到v12，同步将Angular Material从v10升级到v12后，发现部分组件样式变更，例如mat-checkbox：
v10中的样式：

.mat-checkbox {
    transition: background 400ms cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

v12中新增了display属性：

.mat-checkbox {
    display: inline-block; //added property
    transition: background 400ms cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

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