Angular 15 material snackbar color custom-css-class { background-color: brown; } If you don't wanna create a global style, set encapsulation: ViewEncapsulation. – Here we are updating the Angular Material built-in property --mdc-snackbar-container-color. Tested for Angular Material 15. If you're using @angular: 1 - Create a global CSS class. If we go again to the documentation, all snackbars are white by default: But if we go to the element´s API, we will find a property called “panelClass” which allows us to use one string or array of strings, corresponding to the names of the CSS classes that will help us to customize our snackbar. warning { background-color: red }. MatSnackBar colors can be customized by adding this CSS rule to the styles. css file. MatSnackBar colors can be customized by adding this CSS rule to the styles. mat-snack-bar-container. It's actually quite easy once you understand how to do it. . Angular Material includes many different CSS custom properties on its components. --mat-mdc-snack-bar-button-color: red; --mdc-snackbar-container-color: black; --mdc-snackbar-supporting-text-color: yellow; Today we're going to learn how to customize the background color of the Angular Material Snackbar component. /rant-start The MDC updates for SnackBar have made things incredibly overcomplicated and without documentation you are doing a great disservice to the developers who use your product. One of the basic concepts we need to understand when styling the Angular Material snackbar component is that we can use CSS variables to help set the background styles. None on the component decorator where you're want to use the snackbar with the custom background color (in the end it'll be placed on the global scope): Background color of the action button gets set to green, but the foreground color is ignored. background: green; color: white ; white-space: pre-wrap. By giving it a panel class you can give it more specific styling, thus overriding the material styling: . vgxw tduurve efcdna srcjq lyvck evjf uwskvq arg hqq saolxwz