Angular Material-Mat-Dialog-更改背景模糊/变暗效果

Question

您好我心爱的社区，

与角材一起使用角材。

使用默认配置打开材质对话框时，背景会稍微变暗。现在，我希望它成为模糊的背景。我尝试使用css样式，但是无法更改窗口的背景（无法在组件模板中获取正确的选择器）。

我浏览了文档，但是那里什么也没有。我可以使用这些样式，因为我确信可能会有一些棘手的方法，但是考虑到暗化效果已经是开箱即用的了，我认为开箱即用也应该有主题功能。你认为呢？

Answer 1

您可以通过结合不透明度和模糊来实现良好的效果。这样做：

添加backdropClass到您的对话框选项：

backdropClass: "bdrop"

以及样式表的这些规则：

.bdrop {
    background-color: #bbbbbbf2;
    backdrop-filter: blur(4px);
}

演示：https://angular-blurred-dialog-backdrop-zdyvpc.stackblitz.io/

Answer 2

我想您已经错过了文档中的MatDialogConfig -backgroundClass属性。

查看此StackBlitz DEMO的简单示例

从这个演示中：

dialog-overview-example.ts：

openDialog(): void {
  const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
    width: '250px',
    data: {name: this.name, animal: this.animal},
    backdropClass: 'backdropBackground' // This is the "wanted" line
  });

  dialogRef.afterClosed().subscribe(result => {
    console.log('The dialog was closed');
    this.animal = result;
  });
}

styles.css：

.backdropBackground {
  /* your css needs */
}