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:, action, {
  duration: 3000,
  panelClass: 'my-snackbar'  // <- custom panel class

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

    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.

    background-color: darkblue;
    color: white;
    font-style: italic;
    /* Add more rules */


  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

    View all posts