Aplicar estilo CSS a mat-snackbar en Angular

Me pregunto por qué he estado atascado con esto toda la tarde, y me resulta embarazoso que algo tan trivial sea tan difícil de hacer en Angular Material.

Estoy intentando aplicar un estilo personalizado a un snackbar una vez que se hace clic en un botón, este es mi código :

this.errormessagecard.open(error.error.message,'Esci', {panelClass : 'error-snackbar'});

Literalmente he intentado de todo:

En mi componente.css

.error-snackbar{
  background-color: red!important;
} 

error-snackbar{
  background-color: red!important;
}

::ng-deep .error-snackbar{
  background-color: red!important;

Y lo mismo en mi styles.css

Lo que obtengo siempre es el mismo resultado, que es este:

Resultado de la barra de snacks

Nada cambia, ¿por qué??

Respuesta #1

El uso correcto (en la versión actual 19) es declarar la clase CSS en root styles.css y luego establecerla en la propiedad panelClass

ejemplo

en la propiedad

panelClass: 'snackbar-warning'

en styles.css

.mat-mdc-snack-bar-container.snackbar-warning {
--mat-snack-bar-button-color: #fff;
--mdc-snackbar-container-color: #c40202;
--mdc-snackbar-supporting-text-color: #fff;
}

Respuesta #2

actualiza tu hoja de estilos con las nuevas etiquetas:

.error-snackbar {
  --mdc-snackbar-container-color: red;  
  --mat-snack-bar-button-color: white;
}