适用于旧组件的 Angular Material 15 种样式

Question

升级到 Angular 15 后，我想使用旧组件以便之后进行持续迁移。然而，遗留组件并不具有所有样式，并且看起来格式错误。

我使用ng updateAngular 14 到 15 的迁移，并调整主题以使用文档中提到的新方式（https://material.angular.io/guide/theming）

我的输入目前看起来像这样

我正在使用自定义的角度材质主题

Answer 1

问题是旧组件的样式不会自动添加。
您还需要为旧主题调用 mixin。扩展你的styles.scss文件看起来像这样（来源）

@use '@angular/material' as mat;

@include mat.core();
@include mat.legacy-core(); // this is the important line
...
// add your regular theme definition here
...
@include mat.all-component-themes($app-theme);
@include mat.all-legacy-component-themes($app-theme); // this is the important line

例如，如果您只使用一两个遗留组件，我建议不要使用全组件混合，而只使用每个模块的混合组件

@include mat.button-theme($app-theme);
@include mat.legacy-button-theme($app-theme);

这无疑大大减少了应用程序的包大小。否则，您将包含其他未使用的遗留组件的所有 css。

Answer 2

如果您使用预构建的主题，您现在必须从以下位置引用它们。

/node_modules/@angular/material/legacy-prebuilt-themes/legacy-deeppurple-amber.css
/node_modules/@angular/material/legacy-prebuilt-themes/legacy-indigo-pink.css
/node_modules/@angular/material/legacy-prebuilt-themes/legacy-pink-bluegrey.css
/node_modules/@angular/material/legacy-prebuilt-themes/legacy-purple-green.css

以前的位置现在由 MDC 组件使用。不会ng update @angular/material@15自动为您更改此位置。angular.json就我而言，我在数组中引用了该位置"styles"。一旦我更新了这个，一切都会像在版本 14 中一样正确显示。

Answer 3

我注意到 Angular 的官方更新指南省略了运行此 cmd ：

ng g @angular/material:mdc-migration

因此，您将能够选择将哪些组件从旧版迁移到 MDC，并自动调整 CSS。当我运行它时，我的应用程序的损坏程度没有那么严重。更多见解：https://medium.com/ngconf/whats-new-in-angular-material-15-a196e606a33