закусочная динамическая смена цвета угловая 7

Question

Материал Цвет Снэк-бара не меняется

import { Injectable } from '@angular/core';
import { MatSnackBar } from '@angular/material';

@Injectable({
  providedIn: 'root'
})
export class SnackbarService {

  constructor(public snackBar: MatSnackBar) {
  }
  show(message: string, type?: string, duration?: any) {
    this.snackBar.open(message, type, {
      duration: duration ? duration : 2000,
      panelClass: [type],
    });
  }
}

это этот вызов, => this.snack.show(response.message, "success", 3000)

Класс CSS,

.info {
    background: #2196F3;
}
.success {
    background: #1DE9B6;
}
.error {
    background: #B00020;
}

но ни один изКлассы CSS применяются к любому Snakbar, который появляется

Answer 1

Я сталкивался с той же проблемой, похоже, что она перекрывается другими CSS-файлами верхнего уровня, поэтому решения

• добавляют ваши классы в файл styles.scss.

• или если ваши классы в вашем component.scss добавляют /deep/ перед вашими классами, например:

  /deep/ .info { ... }

Answer 2

Попробуйте использовать ::ng-deep при написании классов .info .success .error

Также попробуйте использовать background-color вместо background в CSS

Исправленный код

::ng-deep .info {
    background-color: #2196F3;
}
::ng-deep .success {
    background-color: #1DE9B6;
}
::ng-deep .error {
    background-color: #B00020;
}

Answer 3

Попробуйте установить encapsulation свойство компонента в ViewEncapsulation.None

Как:

@Component({
  selector: 'your_selector',
  templateUrl: 'url',
  styleUrls: ['css_file'],
  encapsulation: ViewEncapsulation.None  <-- This need to set to override the default CSS
})

WORKING DEMO

Answer 4

попробуйте отредактировать ваш CSS как в style.scss:

.mat-snack-bar-container.success {
    background: #1DE9B6;!important;
}

Answer 5

Вам нужно передать имя класса для panelClass.type возврат 0 не будет работать

  panelClass: ['info'],