MatSnackBar open 不会从styles.css 中选择样式答案

【问题标题】：MatSnackBar open does not pick the style from styles.cssMatSnackBar open 不会从styles.css 中选择样式
【发布时间】：2019-11-12 01:38:10
【问题描述】：

我有一个名为 UIService 的 Angular 服务，如下所示，它可以打开一个 MatSnackBar。当它被调用时，panelClass 中定义的颜色属性似乎没有被拾取。

UIService 代码

import { Injectable } from '@angular/core';
import {ReplaySubject, Subject} from 'rxjs';
import {MatSnackBar} from '@angular/material';


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

  loadingChanged: Subject<boolean> = new ReplaySubject<boolean>();
  navigationChanged: Subject<string> = new ReplaySubject<string>();
  constructor(private  matSnackbar: MatSnackBar) {}

  openSnackBar(message: string) {
    this.matSnackbar.open(message, null, {
      duration: 3000,
      verticalPosition: 'top',
      panelClass: ['warning']
    });
  }
}

Styles.css 如下所示

@import "~@angular/material/prebuilt-themes/indigo-pink.css";
html, body {
  font-family: 'Roboto', sans-serif;
  height: 100%;
}

body {
  margin: 0;
}

::ng-deep .warning{
  background: #2196F3;
}

我也在下面的 angular.json 中包含了

"styles": [
              "src/styles.css"
            ],

在我的 index.html 中，我包含在下面的 head 部分中

<link rel="stylesheet" type="text/css" href="./src/styles.css">

但小吃店的颜色不正确。我错过了什么吗。请帮助谢谢

【问题讨论】：

标签： angular

【解决方案1】：

在 Angular 中，组件级样式仅适用于该组件 html。 ::ng-deep 用于当您还希望这些样式应用于组件的子级时。由于您是在全局声明样式，因此无需使用::ng-deep，.warning 就足够了。

查看 Angular docs

【讨论】：