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