Angular Material 从 14 更新到 15 后出现的问题

Question

我正在开发一个 Angular 项目，从 angular14 更新到 15，但是在安装新的 Material 包后，整个项目在视觉上似乎被破坏了。颜色、边距、填充错误。该项目只包含css样式文件，不包含scss。我认为问题出在遗留材料组件上，但是我应该如何/在哪里添加到项目中？谢谢！

Answer 1

正如官方文档中详细介绍的，您需要使用此命令更新材质版本。

ng generate @angular/material:mdc-migration

请注意，此更新可能会破坏应用程序的逻辑，因为它引入了重大更改。

但它将为您的应用程序提供所有新的角度样式。

我假设你已经跑了ng update @angular/material@15

Answer 2

styles将(angular.json)中的 css 文件更改为旧版

铁

从 "./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css",

到 "./node_modules/@angular/material/legacy-prebuilt-themes/legacy-pink-bluegrey.css",

Answer 3

对我来说，解决方案是包含由材料主题提供的遗留主题和核心。

除了核心之外，还包括遗留核心：

@include mat.core();
@include mat.legacy-core();

除了所有组件主题之外，还包括所有旧组件主题：

@include mat.all-component-themes($theme);
@include mat.all-legacy-component-themes($theme);

我使用 nx migrate 进行更新，nx 没有自动迁移，而是将所有 Material 组件重构为 Legacy。这完全搞乱了所有样式，而没有正确包含主题和核心。