Angular Material18.2.9更改对话框样式

在Angular Material 18.2.9中，如果你想更改对话框（`MatDialog`）的样式，可以按照以下步骤操作：

1. **导入主题变量**：首先，在你的项目全局`styles.scss`或`styles.css`中导入Angular Material的主题变量，这允许你自定义对话框的颜色、字体和其他外观属性。例如：

   @import '~@angular/material/theming';

   // 在这里设置你的主题
   $primary: mat-palette($indigo, 500);
   $accent: mat-palette($pink, A200);

   // 创建并应用一个新的主题
   $my-app-theme: mat-light-theme($primary, $accent);

   // 将主题应用于整个应用程序
   @use '@angular/material/core' as core;
   core.dark-theme($my-app-theme);

2. **自定义对话框样式**：然后在相同的文件中，针对`MatDialogContent`和可能的其他对话框组件添加样式，例如设置背景颜色、边框等：

   .custom-dialog-container {
     background-color: white !important; /* 设置背景颜色 */
     border-radius: 6px; /* 可选的圆角 */
   }

   mat-dialog-content.custom-dialog {
     color: black !important; /* 设置文本颜色 */
   }

3. **应用自定义样式**：在需要改变对话框的地方，使用`[@Input]`装饰器从外部注入自定义的主题类名，如：

   import { Component, Input } from '@angular/core';
   
   @Component({
     selector: 'app-custom-dialog',
     templateUrl: './custom-dialog.component.html',
     styleUrls: ['./custom-dialog.component.css']
   })
   export class CustomDialogComponent {
     @Input() dialogClass: string = 'custom-dialog'; // 默认为自定义类名
   }
   
   <!-- 在HTML中引用 -->
   <mat-dialog [class]="dialogClass">
     <!-- Your dialog content -->
   </mat-dialog>

4. **测试样式**：在代码运行时，你可以根据需要动态设置`dialogClass`输入值，以便在不同的场景下应用不同的样式。

记住，每次Material库有新版本发布，某些API可能会有所变化，因此建议查阅最新文档以确保正确使用。