Angular 5 and material - How to change the background color from SnackBar component

AngularAngular Material2

Angular Problem Overview

I have to change the background from the snackbar component. I'm using it to alert or inform the user about some either error or completed action the user did.

The material version from the project. "@angular/material": "^5.0.0-rc.1",

The documentation say about an api to change the class.

panelClass: string | string[] Extra CSS classes to be added to the snack bar container.

This is what I add in the css file.

.mycsssnackbartest {
  background-color: blue;

This is the code to open the snackbar'Informing the user about sth', 'User Message' , {
    panelClass: ['mycsssnackbartest ']
} );

What am I doing wrong?

Angular Solutions

Solution 1 - Angular

You have to use the panelClass option (since v6) to apply classes on a snackbar like this:, action, {
  duration: 2000,
  panelClass: ['blue-snackbar']

CSS (in global styles.scss):

.blue-snackbar {
  background: #2196F3;

See the Stackblitz example

Solution 2 - Angular

Using themes:

Primary:'Some message','Some action', {
    duration: 2000,
    panelClass: ['mat-toolbar', 'mat-primary']

Switch: 'mat-primary' to 'mat-accent' or 'mat-warn'

Solution 3 - Angular

//in component.ts, '', {
    duration: 2000,
    verticalPosition: 'top',
    panelClass: ['warning']
//in component.css
::ng-deep .warning{
   background: 'yellow';

Solution 4 - Angular

Yeah after adding ::ng-deep in global style file(.css) works fine after each attribute... As follows

noMatchConfig: MatSnackBarConfig = {
    duration: 2000,
    horizontalPosition: 'right',
    verticalPosition: 'top',

::ng-deep .redNoMatch
  background: #F44336 !important;

Solution 5 - Angular

This can also be achieved globally by importing MAT_SNACK_BAR_DEFAULT_OPTIONS in app.module.ts:


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

  providers: [
      useValue: { panelClass: ['mycsssnackbartest'] },


.mycsssnackbartest {
  background-color: blue;


All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionandre luis borges de paulaView Question on Stackoverflow
Solution 1 - AngularPhilipp KiefView Answer on Stackoverflow
Solution 2 - AngularFranSanchisView Answer on Stackoverflow
Solution 3 - Angularshreekar hegdeView Answer on Stackoverflow
Solution 4 - AngularAdam reubenView Answer on Stackoverflow
Solution 5 - Angularumbe1987View Answer on Stackoverflow