Angular Material Overriding Default Style of SnackBar Component

To do this properly, you need to set the View Encapsulation to None on your component:

@Component({
    templateUrl: './my.component.html' ,
    styleUrls: ['./my.component.css'], 
    encapsulation: ViewEncapsulation.None,
})

Then in your component css you can just do this:

.mat-snack-bar-container {
   max-width: 800px;
}

From the official docs:

View Encapsulation = None means that Angular does no view encapsulation. Angular adds the CSS to the global styles. The scoping rules, isolations, and protections discussed earlier don't apply. This is essentially the same as pasting the component's styles into the HTML.

Put css in your styles.scss or styles.css

.snackbar {
    max-width: 90% !important;
    margin-left: auto !important; // center align from left
    margin-right: auto !important; // center align from right
    margin-bottom: 1rem !important; 
    padding: 10px !important; // spacing between the text and boundary
    background-color: green;
    color: white;

    .mat-button-wrapper {
        color: black !important; // action text color
    }
}

Note: make sure you have set !important with every style, without it, style wouldn't work.

in component.ts

this.snackbar.open(this.resMsg.message, 'OK', {
    panelClass: 'snackbar'
})

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