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 來設置它的樣式