Angular Material Overriding Default Style of SnackBar Component

Question

I am attempting to override the default max-width of the snackbar component in Angular Material.

The CSS applied by Angular Material is shown below:

.mat         


        

Answer 1

Angular 10 and without special tricks:

1. use panelClass when opening the snackbar, for example:

this.snackBar.open("VeryLongTextWithoutThePossibilityOfBreakingAutomatically", "X", {
    duration: 0,
    panelClass: 'notif-error'
});

duration: 0 is only for debugging.

2. write this into your style.css

.notif-error {
    background-color: red;
}
.mat-snack-bar-container.notif-error {
    max-width: 100%;
}

Now because of css-specificity, this will be the most specific rule.

• Beware that there should not be space between .mat-snack-bar-container and .notif-error.
• This rule will apply to elements which has both the .mat-snack-bar-container and .notif-error classes.
• This also works when your .notif-error class is empty.