Apply css style to mat-snackbar in angular

Asked Feb 27 '23 at 14:05

Active Feb 27 '23 at 14:05

Viewed 257 times

I'm wondering why I've been stuck with this all afternoon, and I find it embarrassing that something so trivial is so hard to do in angular material.

I'm trying to apply a custom style to a snackbar once a button is clicked, this is my code :

this.errormessagecard.open(error.error.message,'Esci', {panelClass : 'error-snackbar'});

I've literally tried everything:

In my component.css

.error-snackbar{
  background-color: red!important;
}

error-snackbar{
  background-color: red!important;
}

::ng-deep .error-snackbar{
  background-color: red!important;

And the same thing in my styles.css

What I get is always the same result, which is this:

Nothing change, why??

edited Feb 27 '23 at 14:05

asked Feb 27 '23 at 14:05

user21234192

Angular material inherints color by the theme you're using, those styles won't change the color. – José Polanco Feb 27 '23 at 14:53
Ok, what if i need to change it? – user21234192 Feb 27 '23 at 14:54
But i still need angular's theme on other components – user21234192 Feb 27 '23 at 14:54
https://stackoverflow.com/questions/58593902/how-to-access-angular-material-colors-in-components Check at this post – José Polanco Feb 27 '23 at 14:56
Man, i need to change only the Snackbar's background, the ViewEncapsulation : none will affect all the correct style given from angular material – user21234192 Feb 27 '23 at 14:58
Got it, check at this then: https://stackoverflow.com/a/47569076/10138953 in this case only the SnackBar is affected. – José Polanco Feb 27 '23 at 15:00
This man is using a .scss file, i'm using css. I had seen this post before, but none of the given solutions work for me – user21234192 Feb 27 '23 at 15:01

0 Answers0