更改 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" 选项覆盖此 class cdk-overlay-pane 同时我需要覆盖的是mat-dialog-container而不影响其他对话框。

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

Answer 1

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

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

更新

因此，为了自定义 material 对话框，您需要创建自定义 css class，并在 style.scss 中设置 class ] 文件：

style.scss

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

在注入 MatDialog 的地方，使用 css class 作为 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

，则其他组件可以安全地使用该对话框，而不会影响外观。

Answer 2

尝试使用 ::ng-deep 但是这样，例如

::ng-deep {
  .mat-dialog-container{
    box-shadow: 0px 11px 15px -7px rgb(0 0 0 / 20%), 0px 24px 38px 3px rgb(0 0 0 / 14%), 0px 9px 46px 8px rgb(0 0 0 / 12%);
    background: #7e2727;
    color: rgba(0, 0, 0, 0.87);
  }
 }

更改 Angular 对话框的背景颜色

Change background color of Angular dialog

css

dialog

angular