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

Question

你好，我亲爱的社区，

使用带角材料的角。

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

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

原文由 qubits 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我猜你错过了文档中的属性 MatDialogConfig - backgroundClass 。

查看这个 StackBlitz DEMO 以获得一个简单的例子

从这个演示：

对话框概述-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;
  });
}

样式.css：

 .backdropBackground {
  /* your css needs */
}

原文由 benshabatnoam 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

 backdropClass: "bdrop"

这些规则适用于您的样式表：

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

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

原文由 yglodt 发布，翻译遵循 CC BY-SA 4.0 许可协议