Angular 5 Material Snackbar panelClass config

Question

I am trying to add a panelClass config to the Angular Material Snackbar.

I wrote the following code, by following documentations from the official websites.

Answer 1

panelClass is defined as

panelClass: string | string[]

Extra CSS classes to be added to the snack bar container.

It is used to add a class, not a style.

Imagine the size of the array if you had to put complex css styling in there.

So you need to define your style in a css and only then you can apply a class to the bar:

panelClass: ['first-class', 'second-class'];

Answer 2

In my case all above doesn't work. It starts working when I add !important in css:

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

Answer 3

In angular 7 using ::ng-deep in front of class worked for me.

::ng-deep  .snackBar-fail {
    color: #ffffff !important;
    background-color: #cc3333 !important;
}

Answer 4

In your component SnackBarComponentExample try:

saveButtonClick = () =>{
  let config = new MatSnackBarConfig();
  config.duration = 5000;
  config.panelClass = ['red-snackbar']
  this.snackBar.open("This is a message!", "ACTION", config);
}

Where 'red-snackbar' is a class in your apps main styles.css file. Strangely I was unable to get the config.panelClass to work when I was referencing my components associated css file, but once I put the class into the main styles.css file my styles were applied correctly to the snackBar.