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

【问题标题】：Angular Material - Mat-Dialog - change background blur / darkening effectAngular Material - Mat-Dialog - 改变背景模糊/变暗效果
【发布时间】：2019-08-02 06:55:37
【问题描述】：

你好，我心爱的社区，

将角度与角度材料结合使用。

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

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

【问题讨论】：

标签： css angular typescript sass angular-material

【解决方案1】：

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

查看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 */
}

【讨论】：

谢谢@benschabatnoam，这正是我想要的。我不知道我怎么会在文档中错过它，它就在顶部。
我们可以使用这个类来使用不透明度制作背景模糊
@Darshantheerth 当然可以，我已经更新了 stackblitz 示例，向您展示如何使用正确的 css

【解决方案2】：

@benshabatnoam 给出的答案是绝对正确的，但文档还有另一个选项可以完全禁用背景。

hasBackdrop

这是一个例子：

https://stackblitz.com/edit/angular-ei9hdv

【讨论】：

【解决方案3】：

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

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

backdropClass: "bdrop"

这些规则到你的样式表中：

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

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

【讨论】：

【解决方案4】：

您也可以在 styles.scss 中覆盖类 .mat-dialog-container {}

.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: #fff;
  color: black;
}

【讨论】：