How to change angular material MatSnackBar color

Angular Material Snackbar is helpful for displaying information to users about API success or failure, among other things.

The general syntax for using the Snackbar is:

import { MatSnackBar } from '@angular/material/snack-bar';

constructor(private _snackBar: MatSnackBar) {}

this._snackBar.open(message, action, configuration)

If we want to change the color of the text, for example, to display an API failure message in red, we can pass a custom class through the configuration object using the panelClass property:

this._snackBar.open('Something went wrong!!!', '', { panelClass: "error-api", duration: 5000 })

An important point to note is that the panel class should be defined in the global stylesheet, such as Style.css, Style.scss or Style.sass.

Here's an example of defining the .error-api class in Style.css:

.error-api {
--mdc-snackbar-supporting-text-color: #f44336;
}