angular - 如何更改角垫对话框背景颜色？

Question

我们如何更改背景或者是对话框后面的背景颜色？与下图相同。

正如您所看到的，当对话框被触发时，它应该像示例图像一样改变背景/背景，知道如何实现这一点吗？如您所见，它有点模糊。

＃代码

activateUserDialog(status:string) {
    const dialogRef = this.dialog.open(UserActivationDialogComponent, {
      height: '288px',
      width: '600px',
      disableClose: true,
      data: {
        status: status,
      }
    });

    dialogRef.afterClosed().subscribe(result => {
      if (result) {
        if(status !== "Deactivated") {
          this.ActivateUserProfileStatus(this.data.id);
        }else {
          this.DeactivateUserProfileStatus(this.data.id);
        }
      }
    });
  }

Answer 1

您可以将类添加到对话框并应用样式：

activateUserDialog(status:string) {
    const dialogRef = this.dialog.open(UserActivationDialogComponent, {
      height: '288px',
      width: '600px',
      disableClose: true,
      backdropClass: 'userActivationDialog' // add this line 
      data: {
        status: status,
      }
    });

    dialogRef.afterClosed().subscribe(result => {
      if (result) {
        if(status !== "Deactivated") {
          this.ActivateUserProfileStatus(this.data.id);
        }else {
          this.DeactivateUserProfileStatus(this.data.id);
        }
      }
    });
  }

在你的 style.css

.userActivationDialog {
    // add css here //change the color
    background-color: blue;
}