Angular Material Snackbar Change Color

I'm using Angular 7 with Material Snackbar. I want to changes the color of Snackbar to green.

In app.component.ts, I have:

this.snackBarRef = this.snackBar.open(result.localized_message, 'X', {
duration: 4000,
verticalPosition: 'top',
panelClass: 'notif-success'
});

this.snackBarRef.onAction().subscribe(() => {
this.snackBarRef.dismiss();
});


In app.component.scss, I have:

.notif-success {
color: #155724 !important; // green
background-color: #d4edda !important;
border-color: #c3e6cb !important;
.mat-simple-snackbar-action {
color: #155724 !important;
}
}


But the Snackbar is still shown in its default colors.



I can see that the notif-success class has been applied to the snackbar

<snack-bar-container class="mat-snack-bar-container ng-tns-c18-84 ng-trigger ng-trigger-state notif-success mat-snack-bar-center mat-snack-bar-top ng-star-inserted" role="status" style="transform: scale(1); opacity: 1;">


Why is the custom css not working?

Continue reading...