如何使用 ng2-izitoast 将自定义 CSS 应用于 Toast？答案

【问题标题】：How can I apply custom CSS to a Toast with ng2-izitoast?如何使用 ng2-izitoast 将自定义 CSS 应用于 Toast？
【发布时间】：2019-06-12 20:47:51
【问题描述】：

我想将自定义样式应用于我在 Angular 应用程序中使用 izitoast 显示的 Toast。我已根据说明安装并包含该库here 除了在我的 app-module 中添加模块之外，我还在 angular.json 中包含了 izitoast css 和脚本，并且还设法在组件中显示带有按钮的 toast：

html-模板（toaster.component.html）

<p>toaster works!</p>
<div><button (click)="produceToast()">Test Toast</button></div>

对应的打字稿文件（toaster.component.ts）

import { Component, OnInit } from '@angular/core';
import {Ng2IzitoastService} from "ng2-izitoast";

@Component({
  selector: 'app-toaster',
  templateUrl: './toaster.component.html',
  styleUrls: ['./toaster.component.scss']
})
export class ToasterComponent implements OnInit {

  constructor( public iziToast: Ng2IzitoastService) { }

  ngOnInit() {
  }

  public produceToast() {
    this.iziToast.show({ title: "Hello World"});
  }

}

我知道如果我想应用自定义样式，我必须以某种方式指定我传递给show()-函数的对象中的类，但我该怎么做呢？在我的 toaster.component.css 中编写 CSS 类并仅引用名称是行不通的：

.myOwnToastClass {
  background-color: blueviolet;
  color: white; //font-color
}

将类添加到我的 styles.css 中也不起作用。两者都不 {class: "myOwnToastClass", title: "Hello World"} 或 {class: ".myOwnToastClass", title: "Hello World"} 做任何事情。有人可以告诉我如何将我自己的自定义 CSS 传递给 toast 吗？ documentation 简单地说“类：将应用于 toast 的类。它可以用作参考。”但除此之外，没有关于如何使用它的文档。

【问题讨论】：

doesn't work 是什么意思？您是否检查过该类是否已添加到浏览器中的 toast 中？也许这个类被添加了，但是那个类的样式被其他东西覆盖了。
该类不会被添加到 toast 中，也不会添加到 toast 的任何创建的
中。我查过了。
它对我有用，我测试过。你的结局一定有问题。您能否将您的确切代码复制粘贴到您的问题中。不幸的是，我无法让 ng2-izitoast 在 stackblitz 中工作。除了添加 classes 之外，其他所有操作都有效吗？
下载这个项目并在本地构建它：stackblitz.com/edit/angular-xio1zm 这对我有用。（izitoast 在 stackblitz 中不起作用，您必须下载它并在您的机器上提供服务）
是的，它有效。但重要的部分（双关语）是你的 CSS 中的“！important”，坦率地说，如果我想拥有多种样式，这非常难看。所以它只有在我将我的 CSS 放在 styles.css 中并且只有在我添加 !important 修饰符的情况下才有效。即便如此，它也不适用于所有事情。尽管您已经可以直接在传递给函数的对象中更改很多东西。谢谢你帮助我，它现在可以工作了。我真的很感激:)

【解决方案1】：

好的。所以感谢用户 fridoo 我能够解决它。

您必须将类添加到您的styles.css 并注意!important 修饰符：

.myOwnToastClass {
  background-color: blueviolet !important;
  border-radius: 0 !important;
  //color: white; // you can't change the font-color with this
                  // you have to use the object-properties in the ts-file
}

然后像这样在打字稿文件中引用它：

public produceToast() {
    this.iziToast.show({class: "myToastClass", title: "Hello World", timeout: 3000, titleColor: "#ffffff"});
        // titleColor: "white" would also work, I think it's a css-class somewhere in the background
  }

【讨论】：

您必须使用!important，因为您正在覆盖现有样式。如果您想将样式添加到组件 css 文件而不是全局 styles.css 您可以在 css 选择器之前使用 ::ng-deep，例如::ng-deep .myOwnToastClass { ... }，但请注意 ng-deep is deprecated。由于Angular's ViewEncapsulation，这些样式将不适用。你可以turn off ViewEncapsulation。