更改 Angular 对话框的背景颜色

Question

我正在尝试更改对话框背景而不触及style.css文件。

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

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不影响其他对话框。

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

Answer 1

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

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

更新

因此，为了自定义材质对话框，您需要创建一个自定义 css 类，并在style.scss文件中设置该类：

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