MatCnackBar panelClass не читает класс стилей

Question

Я хочу вставить класс scss в панель MatSnackBar.но это не сработало.Кстати, вертикальная и горизонтальная позиции работают нормально.вот мой TS:

 openSnackBar(message: string, action: any) {
    this.snackBar.open(message, action, {
      duration: 2000,
      verticalPosition: 'top',
      horizontalPosition: 'center',
      panelClass: ['alert-red'],
    });
 } 

и вот мой Scss:

.alert-red{
  padding: 20px;
  background-color: red;
  color: white;
}

Answer 1

Вы должны установить encapsulation свойство для компонента:

Как:

import { ViewEncapsulation } from '@angular/core'; // import ViewEncapsulation from core

@Component({
  encapsulation: ViewEncapsulation.None  // Set ViewEncapsulation.None for encapsulation property
})

и добавить классы CSS в файл HTML как:

this.snackBar.open("message", {
      panelClass:['customClass']
});

В файле CSS:

.customClass{
  color: red;
}

Рабочая демонстрация

Answer 2

РЕДАКТИРОВАТЬ: Кажется, работает, если вы префикс вашего класса со следующим ::ng-deep snack-bar-container (см. этот комментарий).Таким образом, ваш компонентный файл SCSS должен выглядеть следующим образом:

::ng-deep snack-bar-container.alert-red{
  padding: 20px;
  background-color: red;
  color: white;
}

ВОЗМОЖНОЕ РЕШЕНИЕ: См. Сообщение здесь , похоже, вам нужно добавить стиль в ваши приложения *Файл 1013 *, а не файл SCSS компонентов.

Проверьте этот stackblitz, стиль работает в styles.scss, но не тогда, когда вы закомментируете его и оставите в app.component.scss.Не уверен, что это ошибка или предполагаемое поведение.