小吃店动态颜色变化角度7答案

【问题标题】：snackbar dynamic color change angular 7小吃店动态颜色变化角度7
【发布时间】：2019-05-23 14:18:31
【问题描述】：

Material Snackbar 的颜色没有改变

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

【问题讨论】：

控制台type
获取类型：0
你解决了吗？您放置在 panelClass 中的类没有添加到元素中，还是添加了但没有效果？这些是不同的问题。

标签： css angular typescript angular-material

【解决方案1】：

您需要传递panelClass 的类名。 type 返回0 将不起作用

  panelClass: ['info'],

【讨论】：

我也试过了，但仍然没有应用任何 css

【解决方案2】：

尝试将组件的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

【讨论】：

它不是物理的，因为它会影响一些我不需要的组件encapsulation
嗯！看看documentation和official one按你的要求使用吧！

【解决方案3】：

尝试像在 style.scss 中那样编辑你的 CSS：

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

【讨论】：

【解决方案4】：

在编写类 .info .success .error 时尝试使用::ng-deep

还可以尝试在 CSS 中使用 background-color 而不是 background

更正的代码

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

【讨论】：

【解决方案5】：

我也遇到过同样的问题，看起来它被其他顶级 CSS 文件覆盖了，所以解决方案是

在styles.scss 文件中添加您的课程。
或者如果您在 component.scss 中的类在您的类前面添加 /deep/，例如：

/deep/ .info { ... }

【讨论】：

【解决方案6】：

openSnackBar(message: string) {
 panelClass: ['ghiles-snackbar'],
}


in style.scss
.ghiles-snackbar {
    background: #2196F3;
  }

【讨论】：

感谢您提供此代码 sn-p，它可能会提供一些有限的即时帮助。 proper explanation 将通过展示为什么这是解决问题的好方法，并使其对有其他类似问题的未来读者更有用，从而大大提高其长期价值。请edit您的回答添加一些解释，包括您所做的假设。