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
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: color;
.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'
})