Angular 5 and material - как изменить цвет фона из компонента SnackBar

Я должен изменить фон из компонента snackbar. Я использую его для оповещения или информирования пользователя о какой-либо ошибке или завершенном действии пользователя.

материальная версия из проекта. "@angular / material": "^5.0.0-rc.1",

документация https://material.angular.io/components/snack-bar/api скажем об api для изменения класса.

panelClass: строка / строка[] Дополнительные классы CSS, которые будут добавлены к закуске контейнер бара.

это то, что я добавляю в файл css.

.mycsssnackbartest {
  background-color: blue;
}

это код для открытия закусочной

this.snackBar.open('Informing the user about sth', 'User Message' , {
    panelClass: ['mycsssnackbartest ']
} );

что я делаю не так?

6
angular angular-material2

1 ответов

вы должны использовать panelClass опция (начиная с v6) для применения классов на snackbar, как это:

this.snackBar.open(message, action, {
  duration: 2000,
  panelClass: ['blue-snackbar']
});

CSS (в стилях.scss):

.blue-snackbar {
  background: #2196F3;
}

посмотреть Stackblitz пример

13