CODEWITHSUNDEEP
angularangular-material
user12094588
user12094588

Reputation: 321

Why doesn't the color of the snackbar change?

I want to change the background and color of the inscription for the snackbar component. But when I set the style has not changed. How to do it right?

ts:

this._snackBar.open('Test', 'Done!', {
  verticalPosition: 'top',
  horizontalPosition: 'end',
  duration: 2500,
  panelClass: ['test']
 });

css:

.test {
    background: #1abc9c;
    color     : blue;
}

Upvotes: 0

Views: 592

Answers (2)

Hsuan Lee
Hsuan Lee

Reputation: 2330

Add ::ng-deep, or declare it in a global style file(default src/styles.css).

Because it is created in the body using the CDK Overlay, the component style scope does not work for it.

::ng-deep .test {
  background: #1abc9c;
  color     : blue;
}

https://stackblitz.com/edit/angular-zrwxbw?file=app%2Fsnack-bar-component-example.css

Upvotes: 2

upinder kumar
upinder kumar

Reputation: 837

Hi you nedd to override mat-snack-bar-container class

.mat-snack-bar-container {
    color: rgba(255,255,255,.7);
    background: #323232; // change the color here
    box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12);
}

Upvotes: 0

Related Questions