angular 5 matsnackbar change action button color

Question

I'm using MatSnackBar for my angular 5 project, and I cannot seem to change the color of the 'action' button.

I've injected the snack bar to my HttpInterceptor:

    this.snackBar.open('Invalid Login', 'Ok', {                     duration: 2000,                     panelClass: ['my-snack-bar']                 }); 

my css:

    .my-snack-bar {         background-color: #E8EAF6;         color: #3D5AFE;     } 

How can I change the 'Ok' action button color?

Answer 1

Version: "@angular/material": "^5.2.4",

You can access the colors with the panelClass option + the generated class ".mat-simple-snackbar-action".

My example:

snackbar.component.ts

  private configSuccess: MatSnackBarConfig = {     panelClass: ['style-success'],       };    private configError: MatSnackBarConfig = {     panelClass: ['style-error'],   };    public snackbarSuccess(message) {     this.snackBar.open(message, 'close', this.configSucces);   }    public snackbarError(message) {     this.snackBar.open(message, 'close', this.configError);   } 

snackbar.component.css

  .style-success {     color: $primary-text;     background-color: $primary;   }   .style-success .mat-simple-snackbar-action  {     color: $primary-text;   }   .style-error {     color: $warn-text;     background-color: $warn;   }   .style-error .mat-simple-snackbar-action {     color: $warn-text;   } 

Extra info If using a mixin for custom themes you can do something like this to get all the colors:

@mixin snackbar($theme) {   $primary: mat-color(map-get($theme, primary));   $primary-text: mat-color(map-get($theme, primary), default-contrast);   $warn: mat-color(map-get($theme, warn));   $warn-text: mat-color(map-get($theme, warn), default-contrast);    .style-success {     color: $primary-text;     background-color: $primary;   }   .style-success .mat-simple-snackbar-action  {     color: $primary-text;   }   .style-error {     color: $warn-text;     background-color: $warn;   }   .style-error .mat-simple-snackbar-action {     color: $warn-text;   } }