css - Angular Material - Mat-Dialog - cambiar efecto de desenfoque/oscurecimiento del fondo

Hola mi amada comunidad,

Usando Angular con Angular Material.

Con la configuración predeterminada, cuando abres un diálogo de material, se oscurece un poco el fondo. Ahora me gustaría que fuera un fondo desenfocado en su lugar. Intenté jugar con los estilos CSS, pero no pude hacer que el fondo de la ventana cambiara (no pude encontrar el selector correcto dentro de la plantilla del componente).

Revisé la documentación pero no hay nada allí. Puedo experimentar un poco más con los estilos ya que estoy seguro de que probablemente haya alguna manera complicada, pero considerando que el efecto de oscurecimiento ya está disponible por defecto, supongo que también debería haber una función de tematización disponible por defecto. ¿Qué opinas?

Respuesta #1

Supongo que te has perdido la propiedad MatDialogConfig - backdropClass en la documentación.

Consulta este DEMO de StackBlitz para un ejemplo simple

De esta DEMO:

dialogo-resumen-ejemplo.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 */
}

Respuesta #2

Puedes lograr un buen efecto combinando opacidad y desenfoque. Hazlo así:

Agrega backdropClass a las opciones de tu diálogo:

backdropClass: "bdrop"

Y estas reglas a tu hoja de estilo:

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

Demostración: https://angular-blurred-dialog-backdrop-zdyvpc.stackblitz.io/