Angular Material Overriding Default Style of SnackBar Component

前端 未结 6 1419
甜味超标
甜味超标 2021-02-04 07:34

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         


        
6条回答
  •  渐次进展
    2021-02-04 08:13

    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'
    })
    

提交回复
热议问题