Angular Material从14升级到15后页面样式异常问题求助

问题核心 #

Angular Material 15默认启用了基于MDC的新组件系统，旧版遗留组件的样式不再自动加载，导致纯CSS项目出现颜色、边距、内边距异常。

解决步骤 #

1. 全局导入遗留主题样式

在项目的全局CSS文件（如styles.css）顶部添加以下语句，替换为你原项目使用的主题：

@import '@angular/material/legacy-prebuilt-themes/indigo-pink.css';

可选主题包括：deeppurple-amber.css、pink-bluegrey.css、purple-green.css

2. 注册遗留组件模块

在根模块（app.module.ts）或共享模块中，导入并添加遗留组件模块：

import { MatLegacyModule } from '@angular/material/legacy-module';

@NgModule({
  imports: [
    // 其他业务模块
    MatLegacyModule
  ]
})
export class AppModule { }

如果仅使用部分遗留组件，可单独导入对应模块（如MatLegacyButtonModule、MatLegacyCardModule），减少打包体积。

3. 检查组件选择器兼容性

若项目仍在使用旧组件选择器（如mat-button、mat-card），必须确保导入了对应遗留模块；如果要迁移到新组件，需将选择器替换为mat-mdc-button、mat-mdc-card，并切换到新版主题样式：

@import '@angular/material/prebuilt-themes/indigo-pink.css';

4. 排查样式冲突

检查全局CSS文件是否同时导入了新旧主题，若有重复导入需删除其中一个，避免样式冲突。

迁移建议 #

如果计划逐步切换到MDC组件，可先保留遗留样式和模块，逐个替换组件并测试，最终移除MatLegacyModule和遗留主题，完全使用新版Material组件系统。

内容的提问来源于stack exchange，提问作者bugesz