无法修改MatDialog背景色：设置后自动恢复默认

• 问题根源：你使用的是基于MDC的MatDialog组件，mat-mdc-dialog-surface是对话框的实际容器元素，dialog-panel类被添加在它的父元素上，所以背景样式会被内部surface的默认样式覆盖，仅初始瞬间父元素的背景可见，后续被surface完全覆盖，圆角处残留红色是因为父元素存在圆角溢出。

• 修复方案：

  1. 修改styles.scss中的样式，穿透选中内部的mat-mdc-dialog-surface元素：

  .dialog-panel .mat-mdc-dialog-surface {
      background: red !important;
  }
  

  2. 保持原有的对话框打开代码不变：

  const dialogRef = this.dialog.open(CreateOrEditTaskDialogComponent, {
      panelClass: 'dialog-panel'
  });
  

• 原理说明：panelClass会被添加到对话框的外层容器，通过后代选择器可精准定位内部的surface元素，直接覆盖它的默认背景样式，避免被组件内置样式的优先级压制。

内容的提问来源于stack exchange，提问作者yyy-t