更改 Angular 对话框的背景颜色

我正在尝试更改对话框背景 无需触摸style.css file.

正如其他一些答案所说，有很多方法可以设置对话框样式：

1- 此解决方案适用于宽度和高度，但透明背景被“忽略”。

this.dialog.open(DialogComponent, {
      disableClose: true,
      width: "100%",
      height: "100%",
      panelClass: "myClass",
    });


.myClass{
  background-color: transparent !important;
  max-width: none !important;
}

2- 您还可以使用::ng-deep像这样：
在这种情况下，背景颜色设置为透明，但所有对话都获取此属性并且我不希望这样的事情发生

::ng-deep mat-dialog-container {
  background-color: transparent !important;
}

对于我所看到的panelClass: "myClass"选项覆盖此类cdk-overlay-pane同时我需要重写的是mat-dialog-container不影响其他对话框。

有没有办法在不影响其他对话框的情况下做到这一点？

Use host在您的组件样式表中，您只需修改该特定组件的样式：

:host ::ng-deep mat-dialog-container {
  background-color: transparent !important;
}

UPDATE

因此，为了自定义材质对话框，您需要创建一个自定义 css 类，并在您的应用程序中设置该类style.scss file:

style.scss

.custom-modalbox > mat-dialog-container {
  background-color: transparent !important;
}

哪里你有MatDialog注入，使用它css类为panelClass财产：

YourComponent.ts

onOpenDialig() {
  this.dialog.open(DialogComponent, {
    disableClose: true,
    width: "100%",
    height: "100%",
    panelClass: 'custom-modalbox', // if you don't set this
                                   // that css class won't applied
  });
}

这样，其他组件就可以安全地使用该对话框，而不会影响外观（如果不使用的话）custom-modalbox