Snackbar básico de material angular sin botón

Investigamos en diferentes espacios y así tener para ti la solución para tu problema, si continúas con alguna inquietud deja tu duda y contestaremos con mucho gusto, porque estamos para ayudarte.

Solución:

Prueba esto.

snackbar.open('Message archived', '', 
  duration: 3000,
  extraClasses :['test']
);

agregue estilos a la clase de prueba para que el texto esté alineado.

Si extraClasses no funciona, use panelClass en su lugar

Clase CSS.

.test .mat-simple-snackbarjustify-content: center;

Actualización 2020

La respuesta aceptada parece ya no ser correcta. Si alguien se topa con el mismo problema, esto es lo que funciona para mí:

Crea el snackbar con el panelClass propiedad como de costumbre.

// xy.component.ts

this.snackBar.open('Message', '', 
    duration: 3000,
    panelClass: ['simple-snack-bar']

Dado que el CSS personalizado se aplica al contenedor de la barra de bocadillos, debe seleccionar la clase de barra de bocadillos de Material angular para anular el estilo.

/* 
styles.css - if you don't want to use ::ng-deep (what is not recomended),
then you are forced to put your styles in the global scope
*/

.simple-snack-bar .mat-simple-snackbar 
  justify-content: center;

Sección de Reseñas y Valoraciones

---

---

Utiliza Nuestro Buscador