feat(snack-bar): allow addition of extra css classes

[crisbeto]

Allows users to add extra CSS classes to the snack bar container via the extraClasses option.

Fixes #2664.

[jelbourn]

LGTM

[giona69]

hello!

this would be really useful to me ... I see that is not yet included in npm, when will it be? it's not clear to me current release policy, sorry.

[crisbeto]

@giona69 it should be in the text release. If you don't want to wait until then, you can install the code from master: npm install https://github.com/angular/material2-builds.git.

[giona69]

oh great! thanks so much!

[xmeng1]

This feature should be very useful and make the snack bar to the total customization.

1. background
2. inner with component (anything you want to put into the component)

[ndkcha]

Is it released yet ?

[xmeng1]

Yes, it had released in newest version.

[Code-Crash]

I guess it's not in the document yet.

[aelkz]

Docs is missing styling customization, how I can change font and bg color? Thanks!

[UplandsDynamic]

@aelkz You're now able to add custom classes to the snack-bar-container element, which you can target and style with CSS in the usual way. To do that, you list the extra classes in an array assigned to the extraClasses property, which is passed in your configuration when opening a snack-bar.

For example:

this.snackbar.open('My message string', 'My action string', { extraClasses: ['my-custom-class'], duration: 2000} ).onAction().subscribe(() => this.myActionCallback());

[Mohitsirf]

can anyone give one working example for changing message color and specifying action in snackbar

[benishak]

this.snackbar.open('My message string', 'My action string', { extraClasses: ['my-custom-class'], duration: 2000} ).onAction().subscribe(() => this.myActionCallback());

this is not working!

[UplandsDynamic]

@benishak I am using precisely that code in my own application, which is working absolutely fine. Your implementation may not work, for whatever reason. But I can assure you that "it" is indeed "working".

[benishak]

that's weird, i tried too many possibilities ... here is my code

:host /deep/ snack-bar-container .success {
  background-color: #00ff7f !important;
}

:host /deep/ snack-bar-container .error {
  background-color: #b24747 !important;
}

I also tried without :host or/and /deep/, I also tried snack-bar-container.error

And Component

showSnackBar(message: string, action: string, stat?: string) {
    let config = new MdSnackBarConfig();
    config.duration = 2000;
    if (stat) config.extraClasses = [stat];
    this.snackBar.open(message, action, config);
  }

I'm using Materials ^2.0.0-beta.8

[UplandsDynamic]

@benishak Is the class at least being added to your html? Can you confirm it's present using your browser's dev tools?

Try simply targeting the class name in your CSS.

For example, name the class something less generic (to avoid clashes), such as snackbar-success, then in your CSS:

.snackbar-success { background-color: #00ff7f !important; }

[benishak]

After checking I cannot see the css in the browser ...
I tried to add it manually directly in the browser then it worked.

although I have in the same component css other styles and they are working fine

[UnitOneOnline]

be careful about where you put the css class. if you put the css class in the app-name.component.css file, the css selector is rewritten by angular to .class-name[_ngcontent-c0]. if you put the css class in a separate file and then include it in the index.html page via a link tag the selector does not change and the class will be applied to your element. the issue, in this case, is that the snack-bar element does not include the _ngcontent-c0 attribute.

[kuncevic]

Need to use panelClass now as extraClasses had being deprecated

Initially was struggling to style the action button but here it is hope it will help to someone else:

this.snackBar.open(message, action, {
      panelClass: ['snack-bar-color'],
      duration: 0,
    });

.snack-bar-color {
  background-color: #00ff7f;
  color: orange;

  button {
    color: orange;
  }
}

[gazebosx3]

for newbs like me: if this isn't working, make sure your css class is using :ng-deep, like this:

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

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

found here

[zahasoftware]

All above options doesn-t work, but this works for me,

@import '../node_modules/@angular/material/_theming.scss';
@include mat-core();

$background-primary: #232323;
$background-accent: #353535;
$background-warn: #c1640c;
$font-color-default: silver;

$my-app-primary: mat-palette($mat-light-green, 700);
$my-app-accent: mat-palette($mat-cyan, 800 );
$my-app-warn: mat-palette($mat-red, 400);

$my-app-theme: mat-dark-theme($my-app-primary, $my-app-accent, $my-app-warn);

@mixin snack-theme($theme) {
    // Extract whichever individual palettes you need from the theme.
    $primary: map-get($theme, primary);
    $accent: map-get($theme, accent);
    $warn: map-get($theme, warn);


    .mat-snack-bar-container {
        background-color: $background-accent !important;
        color: $font-color-default;
    }
    //Added with panelClass property
    .snack-error {
        button {
            color: mat-color($warn)
        }
    }
    //Added with panelClass property
    .snack-success {
        button {
            color: mat-color($primary)
        }
    }
}

@include snack-theme($my-app-theme);

[angular-automatic-lock-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.}