How to Change the Background Color of a Mat Snackbar in Angular?

To change the background color of a mat snackbar you have to add a custom panel class in the snackbar configuration object. The configuration object is used to pass additional information to the snackbar.

This is how you can pass a panel class to the snackbar:

this.snackbar.open(message, action, {
  duration: 3000,
  panelClass: 'my-snackbar'  // <- custom panel class
});

Now open up your global styles.css file and add this panel class there:

.my-snackbar{
    background-color: darkblue;

    /* Add more styles */
}

The panel class is component specific. It means that styles defined under the .my-snackbar panel class will affect only those snackbars which have the .my-snackbar panel class. The other snackbars will not be affected.

The panel class not just allows you to change the background color of the snackbar but you can add as many styles as you want such as text color, font-style, font-size, etc.

.my-snackbar{
    background-color: darkblue;
    color: white;
    font-style: italic;
    /* Add more rules */
}