Components: extraClasses on snackBar doesn't work properly.

[jasonburrows]

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?

[jasonburrows]

...Note that adding !important makes it work, but I don't think that should be required.

[willshowell]

Try snack-bar-container.success-snackbar as your css selector. Does that work?

[jasonburrows]

That didn't fix it, and in fact if I use snack-bar-container.success-snackbar as my selector, it doesn't work even with !important.

[willshowell]

See this plunk for an example: https://plnkr.co/edit/h9v8kIeJroZoJgiGiqUJ?p=preview

[sarora2073]

I encountered the same issue at first, but was able to resolve by setting ViewEncapsulation.None in my component (snippet below). Simply adding the green background into the component-level css , even with the !important declaration was insufficient to get the component-level styling to override the angular material css. The plunkr seems to "solve" the issue by inlining the css into the index.html which of course isn't practical in general, so hopefully this helps.

import { Component, ViewEncapsulation } from '@angular/core';
@Component({
...
encapsulation: ViewEncapsulation.None

[jasonburrows]

@willshowell Thanks - I had misinterpreted what you had suggested and had a leading '.' in front of the selector. It does work with the leading 'snack-bar-container' now.

So that's OK - I have a way to get it to work without !important, and I understand why your solution works. I'm curious though - is this the expected behaviour, or is it considered a bug?

@sarora2073 - Interesting, although since I've found two other ways to do it that are pure CSS I'll stick with what I've got until I hear what the 'official' solution is. Best of luck! Maybe check out @willshowell 's plunk.

[JaimeStill]

@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:

[jasonburrows]

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.

[JaimeStill]

Sorry for the confusion, yeah, the documentation isn't very clear on some of these things. It takes a lot of time parsing through the DOM in chrome to figure out how to get these things to work.

[sarora2073]

bump! I think this one can be closed. extraClasses has been working for some time now.

[moequraishi]

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;
}

[markus-heinisch]

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.

[sebastiandenis]

@markus-heinisch try to override .mat-simple-snackbar-action and .mat-sipmple-snackbar-action:focus classes.

[sarikonduri]

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

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

[markus-heinisch]

@sebastiandenis Thanks. :-)
Here is my CSS snippet:
::ng-deep .mat-simple-snackbar-action button {
background-color: #c00003;
color: white;
}

[mojtaba-ramezani]

Hi
Renaming extraClasses to panelClass !!!!

[seanmavley]

In my case, adding !important was needed

::ng-deep snack-bar-container.custom-class {
  background: yellow !important; // <------
 }

[crisbeto]

Closing since the config option does cause the classes to be applied. The issues here seem to be related to CSS specificity.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}