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?

[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.