Question

我有一个名为UIService的角度服务，如下所示，它可以打开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中，我在下面的标题部分添加了

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

但是，小吃店没有以正确的颜色显示。我有错过任何事情吗？请帮助谢谢

Answer 1

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

查看角度docs

MatSnackBar打开不会从styles.css中选择样式

1 个答案: