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

Question

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 https://material.angular.io/components/snack-bar/api 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

this.snackBar.open('Informing the user about sth', 'User Message' , {
    panelClass: ['mycsssnackbartest ']
} );

What am I doing wrong?

`MatSnackBarConfig` has a field named `extraClasses` "Extra CSS classes to be added to the snack bar container." You are using `panelClass` which it doesn't exists — J-R Choiniere, Nov 29 '17 at 20:02
If found panelClass in the api documentation. https://material.angular.io/components/snack-bar/api. I didn't use extraClasses because the documentation says it is Deprecated. But I'm going to test it. Thanks. — andre luis borges de paula, Nov 30 '17 at 11:06

score 175 · Accepted Answer · edited Aug 24 '23 at 19:46

175

Angular < V15

You have to use the panelClass option (since v6) to apply classes on a snackbar like this:

this.snackBar.open(message, action, {
  duration: 2000,
  panelClass: ['blue-snackbar']
});

CSS (in global styles.scss):

.blue-snackbar {
  background: #2196F3;
}

See the Stackblitz example

Angular >= v15

The Angular team did add global css variable

So you still need to add the panelClass and you can add it to CSS like this

  .mat-mdc-snack-bar-container {
    &.blue-snackbar {
      --mdc-snackbar-container-color: #2196f3;
      --mat-mdc-snack-bar-button-color: #fff;
      --mdc-snackbar-supporting-text-color: #fff;
    }
  }

edited Aug 24 '23 at 19:46

aakaasaraamanna

61
10

answered Nov 30 '17 at 08:38

Philipp Kief

8,172
5
33
43

1

Thanks very much. It worked. I wasn't using scss file. I was trying to set it in the css file from the component. – andre luis borges de paula Nov 30 '17 at 11:07
2

As of material 6 extraClasses has been deprecated. panelClass should provide the same functionality. – Brian Stanley Jul 03 '18 at 16:49
1

@BrianStanley Thank you, I updated the example and my answer accordingly! – Philipp Kief Jul 04 '18 at 10:05
17

Doesn't work without !important for the background color. – tchap Sep 30 '18 at 10:15
2

I had to add !important to the css rule to make it work properly – Giovanni Avila Mar 28 '19 at 13:24
This could be improved by using themes. See answer by @FranSanchis. – Purple Piranha Jan 17 '20 at 12:54
Only works with `::ng-deep` on my configuration (Angular 7.0.3). – A. Markóczy Feb 05 '20 at 12:27
add mat-toolbar in panelClass array and then no need to use ::ng-deep or important this.snackBar.open(message, action, { duration: 30000, panelClass: ['mat-toolbar', 'blue-snackbar'] }); – Shubham Shaw Jun 29 '20 at 02:50
Man, thanks a lot! https://medium.com/cmind/custom-theme-for-angular-material-components-series-apply-theme-c12ce3bfa4a this article is complete BS – Abhishek Sharma Aug 02 '20 at 17:11
Works well in styles.scss. No need to deep or important in global. – LacOniC Feb 24 '21 at 18:46
Does anyone know how to get the global vars in >v15 to work with color palettes/themes? Using mat.get-color-from-palette does not seem to work in combination with the global vars – Fynn Jul 24 '23 at 12:24

score 63 · Answer 2 · edited Feb 28 '20 at 14:57

63

Using themes:

Primary:

this.snackBar.open('Some message','Some action', {
    duration: 2000,
    panelClass: ['mat-toolbar', 'mat-primary']
});

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

edited Feb 28 '20 at 14:57

Falko

17,076
13
60
105

answered Nov 19 '19 at 12:22

FranSanchis

1,455
14
15

9

This should really be the accepted answer, as it does it properly by using themes. – Purple Piranha Jan 17 '20 at 12:53
3

@PurplePiranha I don't agree, `mat-toolbar` is another element of angular material and using this config changed the font size on my `mat-snackbar` which is not really intended. Can be useful in some cases though... – A. Markóczy Feb 05 '20 at 12:30
This is just a (in my opinion bad) workaround as it uses the class of a different element to style the snackbar. The OK button for example looks odd as it does not get affected by the styling with this approach. It would be better to make your own class and put it into global styles.scss (as suggested by the accepted answer) – Tobias Kaufmann Nov 27 '20 at 13:41

score 22 · Answer 3 · answered Mar 31 '19 at 15:49

22

//in component.ts
this.snackbar.open(message, '', {
    duration: 2000,
    verticalPosition: 'top',
    panelClass: ['warning']
 });
//in component.css
::ng-deep .warning{
   background: 'yellow';
}

answered Mar 31 '19 at 15:49

shreekar hegde

273
2
5

1

I'm using Angular 7 and this worked for me, not the accepted answer. You have to add ::ng-deep in front of the class name in your css. Thanks so much! – muzurB Apr 26 '19 at 03:18
2

::ng-deep is depreciated and will not be supported in the future by Angular https://angular.io/guide/component-styles – tif May 07 '19 at 13:29
what should we use instead in this case ? – An-droid Sep 04 '19 at 15:34
@An-droid, Angular has not set a version for the removal, since there is no replacement option yet (https://angular.io/guide/deprecations). But I would advise to use global styling (via styles.scss) in combination with the panelClass option for this instead of component specific styling – Mr.wiseguy Sep 05 '19 at 12:52
by doing so I'm forced to use `!important` which I shouldn't be using for that application TT.TT – An-droid Sep 06 '19 at 08:13
1

By giving it a panel class you can give it more specific styling, thus overriding the material styling: `.mat-snack-bar-container.warning { background-color: red }`. – Mr.wiseguy Sep 16 '19 at 09:30

score 5 · Answer 4 · answered Oct 06 '20 at 10:02

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',
    panelClass:['redNoMatch']
  }



::ng-deep .redNoMatch
{
  color:white;
  background: #F44336 !important;
}

score 1 · Answer 5 · answered Jan 07 '22 at 17:16

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

app.module.ts

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

@NgModule({
  providers: [
    {
      provide: MAT_SNACK_BAR_DEFAULT_OPTIONS,
      useValue: { panelClass: ['mycsssnackbartest'] },
    },
  ],
})

styles.css

.mycsssnackbartest {
  background-color: blue;
}

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

5 Answers5

Angular < V15

Angular >= v15

Linked