Angular Material - Mat-Dialog - изменение эффекта размытия фона / затемнения

Question

Привет, мое любимое сообщество,

Использование угловых с угловым материалом.

При настройке по умолчанию при открытии диалогового окна материала он немного затемняет фон.Теперь я бы хотел, чтобы это был размытый фон.Я попытался поиграться со стилями CSS, но не смог изменить фон окна (не смог выбрать правильный селектор внутри шаблона компонента).

Я просмотрел документацию, но там ничего нет.Я могу немного больше поиграть со стилями, так как уверен, что, возможно, есть какой-то хитрый способ, но, учитывая, что эффект затемнения уже есть в коробке, я бы предположил, что в коробке должна быть также доступна функция создания тем.Что вы думаете?

Answer 1

Полагаю, вы пропустили свойство MatDialogConfig - фон класса в документах.

Проверьте это 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 */
}