htmlcssangularangular-material

MatSnackBar: Colors have no effect

I have trouble adding a CSS class to MatSnackBar.

this._snackBar.open('✔ Saved', '', {
  duration: 3000,
  horizontalPosition: 'right',
  panelClass: ['snackbar-success']
});

.snackbar-success
  background: $success
  color: #fff

It used to work before but since I have updated Angular Material to 17.0.4, it doesn't work anymore. I now have updated to 17.0.5 and it still does not work.

Basically, the CSS class is getting added but it has no effect. It seems as if it is being added in the wrong place.

This is what i see in DOM:

enter image description here

display: none !important works but in my case I am using colors. I tried color, background, background-color, and all of them with !important but none of them worked.

Am I doing something wrong or is this a bug?

Solution

  • Here how you can change the colors of mat-snackbar:

    .mat-mdc-snack-bar-container.snackbar-success {
  --mat-mdc-snack-bar-button-color: #fff;
  --mdc-snackbar-container-color: #28a745;
  --mdc-snackbar-supporting-text-color: #fff;
}