Angular Material 15 中的样式升级一团糟

Question

目前，我们正在 Angular 15 项目中将 Angular Material 从 14 升级到 15。我一直遵循升级指南来使用新的基于 MDC 的组件，因为我们的项目正在快速增长，我们不想太长时间依赖旧版本。

我们现在面临的是样式上的一大堆错误。我们的代码中有许多对材料类的引用，这些材料类现在要么被重命名，要么完全重写，使得迁移它们变得非常混乱。

这让我们重新考虑对 Angular Material 项目的信任，因为我们无法承担此类重大突破性更新。我们还想知道我们可以采取什么措施来防止这种影响。

我们看到 Angular Material 现在提供 CSS 自定义属性来覆盖它们的一些样式，但我还没有找到所有这些新变量的一致指南。我希望这是一种更强大或更值得信赖的重写引用 mat-* 或 mat-mdc-* 类的样式的方法。如果没有，从 Angular Material 15 开始，您认为覆盖材质样式的最佳方法是什么？

Answer 1

这确实是一个重大的突破性改变。但公平地说，这已经等了很长时间了……我相信他们在版本 8 推出时就开始致力于 MDC Web 对齐了。

您可以采取的至少划分重构负载的一种方法是使用旧组件，这些组件在@angular/material/legacy-*入口点上仍然可用。然后，您可以开始将组件逐一迁移到新版本，从而为您提供时间和集中精力来正确测试意外的副作用！

至于你的另一个问题：新的主题 API（他们称之为 Token API，因为它是 Material 设计令牌的“编码”表示 - 至少我相信这就是原因），它使用 CSS 自定义属性，正在开发中此时此刻。

我一直在经常检查他们的提交，因为我在工作中面临着类似的挑战......他们似乎计划在版本 16.2.0 上发布 API，至少对于他们的一些组件来说是这样。

我同意他们正在走的道路。自定义属性可能很快就会成为组件样式自定义的“转到”方法...它已经在朝着这个方向发展：我认为 primeNG 是计划在第三季度开始研究它的另一个大公司。

但是，虽然 API 不可用，但我认为在记录良好的 SCSS 文件中分离材质样式覆盖（实际上是任何第三方覆盖），并使用自定义类来“标记”正在使用覆盖的位置（如果它们不是全局的）是一种很好的、​​更容易维护/重构的方法。

就像，您不是在组件的特定 SCSS 文件之一中使用 ::ng-deep 来在其模板中定位 a，而是使用自定义类对其进行标记，并在单独的 SCSS 文件上进行材质覆盖，您可以将选择器组合到目标 mat -form-field 与该特定类一起使用，如有必要，使用 SCSS 嵌套功能来定位 mat-form-field 的内部类/元素，并且可能还记录其中的原因。然后可以将该文件加载到您的全局 styles.scss 文件中！

抱歉回复太长了哈哈哈希望这有帮助！干杯!