Угловой материал Snackbar Изменить цвет

Question

Я использую Angular 7 с Material Snackbar. Я хочу изменить цвет Snackbar на зеленый.

В app.component.ts у меня есть:

this.snackBarRef = this.snackBar.open(result.localized_message, 'X', {
    duration: 4000,
    verticalPosition: 'top',
    panelClass: 'notif-success'
});

this.snackBarRef.onAction().subscribe(() => {
    this.snackBarRef.dismiss();
});

В app.component.scss у меня есть:

.notif-success {
    color: #155724 !important; // green
    background-color: #d4edda !important;
    border-color: #c3e6cb !important;
    .mat-simple-snackbar-action {
        color: #155724 !important;
    }
}

Но Снэк-бар по-прежнему отображается в цветах по умолчанию.

Я вижу, что класс закусок был применен к закусочной

<snack-bar-container class="mat-snack-bar-container ng-tns-c18-84 ng-trigger ng-trigger-state notif-success mat-snack-bar-center mat-snack-bar-top ng-star-inserted" role="status" style="transform: scale(1); opacity: 1;">

Почему не работает пользовательский CSS?

Answer 1

Вы должны написать этот .notif-success класс CSS на вашем основном styles.scss вместо app.component.scss.

Если вам интересно, это тот, который находится на том же уровне каталоговкак ваш index.html, package.json и т. д.

Answer 2

Это то, что вы ищете:

::ng-deep .mat-snack-bar-container{
  color: #155724 !important;
  background-color: #d4edda !important;
  border-color: #c3e6cb !important;
}
::ng-deep .mat-simple-snackbar-action {
  color: red;
}

завершено рабочая демонстрация здесь

Answer 3

Вместо:

panelClass: 'notif-success'

Попробуйте:

extraClasses: ['notif-success']

У меня была та же проблема, и я наткнулся на этот Stackblitz с рабочим примером.

Только что понял extraClasses устарел, принятый ответ, вероятно, лучше здесь.