angular 5 matsnackbar change action button color - angular-material

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

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

Answer 3

This worked for me:
.my-snack-bar button {
background-color: gray;
color: white;
}

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.

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!

Answer 6

For me, below code is worked.
::ng-deep snack-bar-container simple-snack-bar .mat-simple-snackbar-action {
color: black;
}

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

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.