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

问题描述 投票:0回答:4

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

angular angular-material angular14 angular15 angular-migration
4个回答
10
投票

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

ng generate @angular/material:mdc-migration

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

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

我假设你已经跑了

ng update @angular/material@15


8
投票

将 css 文件更改为旧版

styles
(angular.json)

F.e

来自

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

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


5
投票

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

除了核心还包括遗留核心:

@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。这完全搞乱了所有样式,而没有正确包含主题和核心。


0
投票

就我而言,我只是运行了这个命令。

ng add @angular/material
然后从列表中选择预建主题。

© www.soinside.com 2019 - 2024. All rights reserved.