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

Verified for @angular/material v7.0.x:

CSS !important modifier does the trick.

Put this is src/styles.scss (the app's global css):

.mat-snack-bar-container {
  max-width: 100% !important;
}

Also we tweak its font:

/* Overrides SnackBar CSS in Material Design's .mat-simple-snackbar class */
/* Original sizes: font: 24px, height: 47.952px */ 
.mat-simple-snackbar {
  display: flex; 
  font-size: 28px !important; // 28px  is double, 42px for triple
  min-height: 70px !important; // 70px for double, 90px for triple
  align-items: center !important;
  justify-content: center !important;
}