Angular 5 и материал - Как изменить цвет фона с компонента SnackBar

Question

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

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

В документации https://material.angular.io/components/snack-bar/api говорится о API для изменения класса.

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

Это то, что я добавляю в файл CSS.

.mycsssnackbartest {
  background-color: blue;
}

Это код, чтобы открыть закусочную

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

Что я делаю неправильно?

Answer 1

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

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

CSS (в styles.scss):

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

Смотрите пример Stackblitz

Answer 2

Использование тем:

Первичный:

this.snackBar.open('Some message','Some action', {
    duration: 2000,
    panelClass: ['mat-toolbar', 'mat-primary']
});

Переключатель: 'mat-primary' к 'mat-accent' или 'mat-warn'

Answer 3

//in component.ts
this.snackbar.open(message, '', {
    duration: 2000,
    verticalPosition: 'top',
    panelClass: ['warning']
 });
//in component.css
::ng-deep .warning{
   background: 'yellow';
}

Answer 4

Да, после добавления::ng-deep в файл глобального стиля (.css) отлично работает после каждого атрибута... Как показано ниже

noMatchConfig: MatSnackBarConfig = {
    duration: 2000,
    horizontalPosition: 'right',
    verticalPosition: 'top',
    panelClass:['redNoMatch']
  }



::ng-deep .redNoMatch
{
  color:white;
  background: #F44336 !important;
}

Answer 5

дополняя ответ: если у вас включен CSS (не SASS) и ViewEncapsulation, это выглядит так:

Answer 6

Это также может быть достигнуто глобально путем импорта MAT_SNACK_BAR_DEFAULT_OPTIONSв app.module.ts:

app.module.ts

      import {
  MatSnackBarModule,
  MAT_SNACK_BAR_DEFAULT_OPTIONS,
} from '@angular/material/snack-bar';

@NgModule({
  providers: [
    {
      provide: MAT_SNACK_BAR_DEFAULT_OPTIONS,
      useValue: { panelClass: ['mycsssnackbartest'] },
    },
  ],
})

стили.css

      .mycsssnackbartest {
  background-color: blue;
}