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

Question

你好，我亲爱的社区，

使用带角材料的角。

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

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

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

Answer 2

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

有背景

下面是一个例子：

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

Answer 3

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

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

backdropClass: "bdrop"

并将这些规则添加到您的样式表中：

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

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

Answer 4

你也可以在你的styles.scss覆盖 class .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;
}

Answer 5

const dialogConfig = new MatDialogConfig();**strong text**
dialogConfig.id="dialog"
this.dialog.open(CreatOrderComponent,dialogConfig)

// 你可以给它一个 ID 然后你可以使用这个 id 来设置它的样式