Панель MatSnackBarClass не работает из сервиса

Question

В моем компоненте у меня есть функция, которая делает это. инкапсуляция установлена ​​как "None"

update() {
    // do some things and then
    this.snackbarService.showSuccessToast('test success');
  }

snackBarService метод

showSuccessToast(message: string, action: string = 'Close') {
    const config = new MatSnackBarConfig();
    config.horizontalPosition = 'center';
    config.duration = 200000;
    config.panelClass = ['success-snack-bar'];

    this.snackBar
      .open(message, action, config);
  }

И в моем app.component.scss у меня есть

.success-snack-bar {
  background-color: green !important;
}

Вся эта конфигурация этоне работает.

Answer 1

Вам нужно ::ng-deep, чтобы оно заработало.

::ng-deep success-snack-bar {
  background-color: green !important;
}

Хотя я не рекомендую использовать глубину ng, если у вас есть стиль материала scss (как предлагают документы по материалам), он работает так же (без ng-deep и внутри миксина).

Вы можете увидеть информацию о миксинах в этом примере:

Как использовать CSS для стилизации AngularМатериал вкладок?