我正在开发一个 Angular 项目,已从 angular14 更新到 15,但是在安装新的 Material 包后,整个项目在视觉上似乎被破坏了。颜色、边距、填充错误。 该项目只包含css样式文件,不包含scss。我认为问题出在遗留材料组件上,但是我应该如何/在哪里添加到项目中? 谢谢!
正如官方文档中详细说明的,您需要使用此命令更新材质版本。
ng generate @angular/material:mdc-migration
请注意,此更新可能会破坏应用程序的逻辑,因为它引入了重大更改。
但它将为您的应用程序提供所有新的角度样式。
我假设你已经跑了
ng update @angular/material@15
将 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",
我的解决方案是包含由材料主题提供的遗留主题和核心。
除了核心还包括遗留核心:
@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。这完全搞乱了所有样式,而没有正确包含主题和核心。
就我而言,我只是运行了这个命令。
ng add @angular/material
然后从列表中选择预建主题。