如何移除Angular中MatDialog背景上的白色图层？

我尝试为MatDialog组件设置透明背景，相关代码如下：

parent.component.html

openDialog(){
  const dialogConfig = new MatDialogConfig();
  dialogConfig.width = '340px';
  dialogConfig.height = '476px';
  dialogConfig.panelClass = "dialogClass";
  this.dialog.open(ChildComponent, dialogConfig)
}

styles.css（全局文件，非父组件样式文件）

.dialogClass{
    background-color: pink;  // pink to see if it works
}

（仅修改该特定对话框的背景）

或者

mat-dialog-container {
    background-color: pink;
}

（修改所有对话框的背景）

这段代码能生效（每次打开对话框时能短暂看到粉色），但随即会被一个白色图层覆盖。我的ChildComponent内容显示在该图层上方，层级结构为：MatDialog背景 -> 白色图层 -> ChildComponent。即使ChildComponent的.css和.html文件为空，该白色图层依然存在，设置透明背景块也无法解决问题。请问如何移除对话框上的这个白色图层？

你看到的白色图层是Angular Material默认给mat-dialog-container内部的.mat-dialog-panel元素设置的背景，只修改外层样式无法覆盖它，需要针对性设置：

• 仅修改指定对话框：在全局样式文件（styles.css）中，通过自定义的panelClass深入设置内部面板的样式：

.dialogClass .mat-dialog-panel {
    background-color: transparent; /* 替换为你需要的颜色，比如pink或transparent */
    box-shadow: none; /* 可选：如果不需要对话框默认阴影可移除 */
}

同时可以同步修改外层容器的背景，确保整体效果一致：

.dialogClass {
    background-color: transparent;
}

• 修改所有对话框：直接全局覆盖默认面板样式：

mat-dialog-container .mat-dialog-panel {
    background-color: transparent;
}

核心原因：MatDialog的结构里，mat-dialog-container是外层容器，内部的.mat-dialog-panel才是真正承载内容的面板，默认带有白色背景，必须针对这个元素修改才能彻底替换掉那个白色图层。

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