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?

Erose

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

Desouza

On Angular material ^11.0.4 i had to place css code into main style.css file. Placing it into component css file didn't work. – Spontaneity

Answer 2

As mentioned above one can customise the style of the snack bar using the panelClass configurationn.

this.snackBar.open(message, action, {
            duration: 40000,
            panelClass: "success-dialog"
        });

The key here is to override via CSS the mat-simple-snackbar-action. This will do the trick of changing the action button text color.

.success-dialog {
    color: white !important;
    background-color: $success !important;
    .mat-simple-snackbar-action {
        color: white !important;
    }
}

Padrone

Answer 3

This worked for me:

.my-snack-bar button {
    background-color: gray;
    color: white;
}

Schmaltzy

Answer 4

Use this

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

css in your style.css(or .scss) file. It will not work if you put anywhere else.

Unquote

upvote for pointing out the need of putting this into the rootstyles, which made it finally work for me. – Prajna

Answer 5

please add the following in app style.css

.mat-simple-snackbar { font-weight: 600; } // text     
.mat-simple-snackbar-action > button { color: red } // action

enjoy!

Wingard

Answer 6

For me, below code is worked.

::ng-deep snack-bar-container simple-snack-bar .mat-simple-snackbar-action {
  color: black;
}

Reseat

Answer 7

Steig's answer is correct but if that doesn't work then you should add /deep/ in front of your class:

/deep/ .my-snack-bar button {
    background-color: gray;
    color: white;
}

Tousle

Answer 8

You can use this:

let mysnackbar: any = document.querySelectorAll('.my-snack-bar')[0];
    mysnackbar.style.cssText += "color: #3D5AFE;backgroundColor: #E8EAF6";

it works for me.

Continent

Answer 9

One straightforward way to do this is to override the color variable for your panelClass, in style.scss:

.my-snackbar-panel-class {
  --mat-snack-bar-button-color: lightgreen;
}

Maraud

Answer 10

Create reusable method in your service file

import { MatSnackBar } from '@angular/material/snack-bar';

constructor(
    private readonly snackBar: MatSnackBar
) { }

openSnackBar(
    message: string,
    action: string,
    className = '',
    duration = 1000) {
    this.snackBar.open(message, action, {
        duration: duration,
        panelClass: [className]
    });
}

Call below method from your component

this._dialog.openSnackBar(`Please contact IT team.`, "Okay", 'background-red');

Add your class in your Style.scss

.background-red {
    background: red;
}

.mat-mdc-snack-bar-container {
    --mat-mdc-snack-bar-button-color: red !important;
    --mdc-snackbar-container-color: red !important;
    --mdc-snackbar-supporting-text-color: rgba(255, 255, 255, 0.87);
}

.mat-mdc-snack-bar-container .mat-mdc-button.mat-mdc-snack-bar-action:not(:disabled) {
    color: white;
    background: white;
    color: black;
}

Output:

Distressed

Answer 11

.mat-mdc-snack-bar-action {
    color: #dadada !important;
}

Recital