Angular对话框背景透明问题求助

我的Angular对话框组件出现背景透明问题，还存在其他细节异常。手动设置.mat-container的SCSS背景虽能临时解决，但并非理想方案，仍有细节待修复。我严格按照Angular文档示例编写代码，逻辑完全一致却无法正常运行。

对话框模板代码 #

<h1 mat-dialog-title>Hi {{data.name}}</h1>
<div mat-dialog-content>
  <p>What's your favorite animal?</p>
  <mat-form-field>
    <input matInput [(ngModel)]="data.animal">
  </mat-form-field>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="onCancel()">No Thanks</button>
  <button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button>
</div>

对话框组件类代码 #

@Component({
  selector: 'app-dialog-amostra-rotina',
  templateUrl: './dialog-amostra-rotina.component.html',
  styleUrls: ['./dialog-amostra-rotina.component.scss']
})
export class DialogAmostraRotinaComponent {

  constructor(public dialogRef: MatDialogRef<DialogAmostraRotinaComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any) { }

  onCancel(): void {
    this.dialogRef.close();
  }
}

调用对话框的组件代码 #

openDialog(): void {
  const dialogRef = this.dialog.open(DialogAmostraRotinaComponent, {
    width: '250px',
    data: {name: this.name, animal: this.animal}
  });

  dialogRef.afterClosed().subscribe(result => {
    this.animal = result;
  });
}

排查与解决方案 #

• 检查Material主题配置
  确保全局styles.scss中已正确导入Angular Material主题样式：

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

  若使用自定义主题，需保证mat-dialog-container的样式被正确覆盖，主题包含必要的颜色变量。

• 解决组件样式隔离问题
  若需临时修复，可在全局样式文件中定义对话框背景（避免使用组件内::ng-deep）：

  .mat-dialog-container {
    background-color: #ffffff;
  }
  

• 验证依赖版本兼容性
  执行ng version检查Angular与Angular Material版本是否匹配，主版本不一致易导致样式渲染异常。

• 确认模块导入完整性
  在对应模块中导入所需Material组件模块：

  import { MatDialogModule } from '@angular/material/dialog';
  import { MatFormFieldModule } from '@angular/material/form-field';
  import { MatInputModule } from '@angular/material/input';
  import { MatButtonModule } from '@angular/material/button';
  
  @NgModule({
    imports: [
      MatDialogModule,
      MatFormFieldModule,
      MatInputModule,
      MatButtonModule
    ]
  })
  export class AppModule { }
  

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