在 Angular 15 中，Material 升级到了版本 13.对于部分 Material 组件，如对话框，导航栏和侧边栏组件，一些 CSS 类名称已更改为 mat-mdc-。这为旧版本中使用了 Material 组件的应用程序带来了一些升级问题。

要正确升级到 Angular Material 13，需要进行以下更改：

1. 在 app.module.ts 中导入所需的组件：

import {MatDialogModule} from '@angular/material/dialog'; import {MatSidenavModule} from '@angular/material/sidenav'; import {MatToolbarModule} from '@angular/material/toolbar';

2. 确保在组件中使用正确的 class 名称：

旧版本中可能使用 mat-* 的类名，而新版本中已更改为 mat-mdc-* 。请检查您的组件并相应地更改类名。

例如，在侧边栏组件中，将 mat-sidenav 转换为 mat-mdc-sidenav。

Sidenav Main content

更改后：

Sidenav Main content

3. 在样式表中更新对应的 CSS 样式：

更新样式表以包含新的 mat-mdc- CSS 类名称，以确保组件正确渲染。

例如，将原来的 mat-toolbar 转换为 mat-mdc-toolbar。

mat-toolbar { background-color: red; color: white; }

转换为：

mat-mdc-toolbar { background-color: red; color: white; }

通过这些更改，您可以成功升级到 Angular 15 Material，并使用新的 mat-mdc- CSS 类名称来正确渲染组件。