Angular Material Snackbar Change Color

Question

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?

Answer 1

You should write that .notif-success CSS class on your main styles.scss, instead of the app.component.scss.

If you are wondering, it is the one which is on the same directory level as your index.html, package.json, etc.