如何删除 Angular 中对话框背景上的白色图层？

Question

我正在尝试为我的 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 文件为空，它仍然会出现。 设置具有透明背景的块也没有帮助。 如何从对话框中删除这个白色图层？

Answer 1

它将删除白色背景并在粉红色背景上显示对话框内容

.DialogClass {
  background-color: pink;
}

.DialogClass .mat-dialog-container{
  background-color: transparent !important;
}

假设如果代码不起作用，请将您的角度代码发布在 stackblitz 上，我会仔细查看您的代码。