Angular Material Overriding Default Style of SnackBar Component

问题

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-snack-bar-container {
    border-radius: 2px;
    box-sizing: border-box;
    display: block;
    margin: 24px;
    max-width: 568px;
    min-width: 288px;
    padding: 14px 24px;
    transform: translateY(100%) translateY(24px);
}

I have tried overriding using the same style in my style.css file but this style is overridden by the default style.

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

I have found an answer to a similar question but I know the answer to that question is now deprecated (/deep/ is deprecated).

Is there a best practices solution to this?

回答1:

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.

回答2:

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: #0b8357;
    color: #f7f0cf;

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

回答3:

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

回答4:

As of June 30, 2019, using Angular Material 8.0.1 with Angular 8.0.3, the following SCSS and typescript seems to work for overriding the color of the action button in an Angular Material snackbar *without using !important *:

styles.scss (not the extremely long duration, which allowed me to inspect the styling before it disappeared):

$snackBarTextColor: white;
$snackBarBackgroundNormal: #087a51;
$snackBarActionColor: lightgray;
.snackBarInfo {
    background-color: $snackBarBackgroundNormal;
    color: $snackBarTextColor;


}
.mat-simple-snackbar > span {
    font-weight: bold;
}
.mat-simple-snackbar-action {
    .mat-button {
        .mat-button-wrapper {
            color: $snackBarActionColor;
        }
    }
}

app.module.ts:

import { MAT_SNACK_BAR_DEFAULT_OPTIONS } from '@angular/material/snack-bar';
providers: [
        {
            provide: MAT_SNACK_BAR_DEFAULT_OPTIONS,
            useValue: {
                duration: 41000,
                horizontalPosition: 'center',
                verticalPosition: 'bottom',
                panelClass: 'snackBarInfo'
            }
        }
    ]

回答5:

The way to go.


encapsulation: ViewEncapsulation.None

Here is a stackblick to demonstrate

来源：https://stackoverflow.com/questions/47763799/angular-material-overriding-default-style-of-snackbar-component

标签

css

angular

angular-material2