components: extraClasses on snackBar doesn't work properly.

Bug, feature request, or proposal:

Bug

What is the expected behavior?

When I supply a CSS class to snackbar via the extraClasses property, it should apply that class.

What is the current behavior?

The styles defined in that class are all overridden by other material styling.

What are the steps to reproduce?

In styles.css:

.success-snackbar{
    background-color: #FFF;
    color: #AAA;
}

In my component:

this.snackBar.open("Hey", undefined, {
        duration: 90000,
        extraClasses: ['success-snackbar']
    });

The class IS being applied when I look at it in the inspector, but both color and background-color are being overriden by other material styling.

What is the use-case or motivation for changing an existing behavior?

It isn’t working.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 4.0.1 Material 2.0.0-beta.2 OS: macOS 10.12.4 Typescript: 2.2.2 Browsers: Chrome, Safari

Is there anything else we should know?

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 2
Comments: 19 (3 by maintainers)

Most upvoted comments

Update for OP:

I got this to work using an answer I found on StackOverflow: StackOverflow

You had everything right, just had to specify the css classes properly:

::ng-deep snack-bar-container.custom-class {
  background: yellow;
}

::ng-deep .custom-class .mat-simple-snackbar {
  color: green;
}

+14

moequraishi on Nov 21, 2017

Thanks @moequraishi . Here is my solution for a snackbar that has two different styles depending on online/offline connection. First, my component code: const snackBarRef = this.snackBar.open(message, "Close", { duration: 3000, panelClass: isOnline ? ["online", "onlineAction"] : "offline" }); Component CSS: ::ng-deep .mat-snack-bar-container.offline { background: #c00003; } ::ng-deep .mat-snack-bar-container.online { background: #57c54d; }

One issues is not solved: How can I the color of the action button? I can change the text color of the message but the text color of the action stays white. Adding a color like color: rgba(243, 10, 10, 0.87); to my CSS definitions does not help.

markus-heinisch on Mar 2, 2018

The original question was about using extraClasses to achieve this, not using a custom material theme. As in:

this.snackBar.open("Hey", undefined, {
        duration: 90000,
        extraClasses: ['success-snackbar']
    });

From what I’m getting from the docs, you should be able to just define a style and pass it in like that, but we’ve had to prepend it with “snack-bar-container” for it to work, which I didn’t see anywhere in the documentation.

Using that solves my problem, but it wasn’t documented when I looked last.

jasonburrows on Jul 27, 2017

Hi Renaming extraClasses to panelClass !!!

mojtaba-ramezani on Oct 23, 2018

‘extraClasses’ config is deprecated now, Instead you can use ‘panelClass’ as below

this.snackBar.open(“Hey”, undefined, { duration: 90000, panelClass: [‘success-snackbar’] });

sarikonduri on Jul 20, 2018

@jasonburrows, @willshowell, @sarora2073, in Angular 4.1.2 / Angular Material 2.0.0-beta.8, styling the snackbar as requested above seems to be working fine.

I’m using a material-theme.scss file for my global stylings / setting up a custom material theme. I was able to style the background and color as follows:

snack-bar-container.snack-light {
    background-color: white;
}

.snack-red simple-snack-bar.mat-simple-snackbar {
    color: map-get($mat-red, 500);
}

This produces:

sample-snack

JaimeStill on Jul 27, 2017