Angular 5 and material – How to change the background color from SnackBar component

Angular < V15

You have to use the panelClass option (since v6) to apply classes on a snackbar like this:

this.snackBar.open(message, action, {
  duration: 2000,
  panelClass: ['blue-snackbar']
});

CSS (in global styles.scss):

.blue-snackbar {
  background: #2196F3;
}

See the Stackblitz example

Angular >= v15

The Angular team did add global css variable

So you still add the panelClass but you know add it like this

  .mat-mdc-snack-bar-container {
    &.blue-snackbar {
      --mdc-snackbar-container-color: #2196f3;
      --mat-mdc-snack-bar-button-color: #fff
      --mdc-snackbar-supporting-text-color: #fff;
    }
  }