遗留组件的 Angular Material 15 样式

Question

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

我使用 ng update 进行了从 Angular 14 到 15 的迁移，并调整了主题以使用文档中提到的新方法 (https://material.angular.io/guide/theming)

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

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

Answer 1

问题是遗留组件的样式不会自动添加。
您还需要为遗留主题调用 mixins。扩展您的 styles.scss 文件，使其看起来像这样 (Source)

@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($my-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。