Javascript 如何使用ng2 izitoast将自定义CSS应用于祝酒词？

我想对我在角度应用程序中使用izitoast显示的烤面包应用自定义样式。 我已按照说明安装并包含该库 除了在我的应用程序模块中添加模块外，我还将izitoast css和脚本包含在my angular.json中，并在组件中通过按钮显示toast：

html模板（toaster.component.html）

我知道，如果我想应用自定义样式，我必须以某种方式指定传递到

show（）

-函数的对象中的类，但是我该如何做呢？在my toaster.component.CSS中编写CSS类并仅引用名称不起作用：

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

将类添加到my styles.css中也不起作用。也不

{class:“myOwnToastClass”，title:“Hello World”}

也不

{class:.myOwnToastClass”，title:“Hello World”}

做任何事。

---

有人能告诉我如何将我自己的自定义CSS传递给祝酒辞吗？简单地说，“类：将应用于toast的类。它可以用作参考。”但除此之外，没有关于如何使用它的文档。

好的。所以多亏了用户fridoo，我才能够解决这个问题

您必须将该类添加到styles.css中，并且要小心！重要修饰语：

.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
}

然后在typescript文件中引用它，如下所示：

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
  }

---

你说的

不起作用是什么意思？您是否已检查该类是否已添加到浏览器中的toast中？可能会添加该类，但该类的样式会被其他内容覆盖。该类不会添加到toast中，也不会添加到toast的任何创建部分。我检查过了，对我有效，我测试过了。你那边一定出了什么事。你能在你的问题中复制粘贴你的准确代码吗。不幸的是，我无法让ng2 izitoast在stackblitz中工作。除了添加
类
，其他一切都有效吗？下载这个项目并在本地构建它：这对我有用。（izitoast在stackblitz中不工作，您必须下载它并在您的机器上提供服务）是的，它可以工作。但最重要的部分（双关语）是CSS中的“！important”，坦白说，如果我想拥有多种样式，这是非常难看的。因此，只有当我将CSS放在styles.CSS中，并且仅当我添加了！它的重要修饰语。即使这样，它也不是万能的。虽然您已经可以直接在传递给函数的对象中更改周围的许多内容。谢谢你的帮助，现在可以用了。我真的很感激：）你必须使用
！重要信息
，因为您正在覆盖现有样式。如果要将样式添加到components css文件中，而不是全局
style.css
，则可以在css选择器之前使用
：：ng deep
，例如
：：ng deep.myOwnToastClass{…}
，但请注意。这些样式将不适用于其他情况，因为。你可以。
.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
  }