angular material 对话框样式设置，现在默认是圆角背景，怎么修改成想要的样式

Angular Material 的对话框（也称为 Modal 或 Popover）提供了丰富的样式选项，可以自定义其外观。如果你想要改变默认的圆形背景，你可以通过以下几个步骤来定制 Angular Material Dialog 的样式：

1. **引入主题（Theme）**：首先，在你的 `styles.css` 文件或 `angular.json` 的全局样式配置中，导入 Angular Material 主题，如 `@angular/material/core/theming/prebuilt/indigo-pink.css`。

// styles.css 或 angular.json
@import "~@angular/material/prebuilt-themes/indigo-pink.css";

2. **创建自定义主题**：如果你想创建自定义的主题，可以在 `src/styles.scss` 或 `src/theme.scss` 中添加自定义变量。例如，你可以修改 `mat-dialog-container` 类的背景颜色和边框样式。

$primary: mat-palette(indigo, 500);
$accent: mat-palette(pink, A400);

// 修改对话框背景颜色和边框
$dialog-background-color: #ffffff;
$dialog-border-radius: 0; // 可以将 border-radius 设置为 0 来去掉圆角

// 创建并应用自定义主题
@use '@angular/material/core' as core;

@include core/theming([
  $body-bg: $dialog-background-color,
  $dialog-outline-color: mat-color($accent, A700),
  $dialog-host-backdrop-color: rgba(0, 0, 0, 0.5),
  $mat-dialog-container: {
    background-color: mat-color($dialog-background-color),
    border-radius: $dialog-border-radius,
    // 其他你需要的样式属性
  },
]);

3. **应用主题**：在 `app.module.ts` 中注册你的自定义主题。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

// ...

@NgModule({
  imports: [
    // ...
    MatDialogModule,
    MatCoreModule,
    // 如果你使用了自定义主题，记得导入它
    ThemeModule.forRoot(),
  ],
  // ...
})
export class AppModule {}

完成上述步骤后，你应该能看到对话框背景和圆角已经被更改为你自定义的样式。如果需要进一步的帮助，可以根据 Angular Material 的官方文档查阅详细信息：https://material.angular.io/components/dialog/api