Почему цвет закусочной не меняется?

Question

Я хочу изменить фон и цвет надписи для компонента закусочной. Но когда я установил стиль не изменился. Как это сделать правильно?

ts:

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

css:

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

Answer 1

Добавьте ::ng-deep или объявите его в глобальном файле стиля (по умолчанию src/styles.css).

Поскольку он создается в теле с использованием CDK Overlay , стиля компонентасфера не работает для него.

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

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

Answer 2

Привет тебе, недогонял, переопределить класс-закусочная-контейнер-контейнер

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