如何使用ng2-izitoast将自定义CSS应用于Toast？
如何使用ng2-izitoast将自定义CSS应用于Toast？
提问于 2019-01-18 22:58:05
我想对我在Angular应用程序中使用izitoast显示的Toast应用程序应用自定义样式。我已经按照说明安装并包含了库。除了在angular.json中添加模块之外，我还在应用程序中包含了izitoast css和脚本，还设法在组件中显示了带有按钮的吐司：
html-模板(toaster.component.html)
<p>toaster works!</p>
<div><button (click)="produceToast()">Test Toast</button></div>对应的typescript文件(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()-function的对象中指定类，但我该如何做到这一点呢？在我的toaster.component.css中编写CSS-class并且仅仅引用它的名字是行不通的：
.myOwnToastClass {
background-color: blueviolet;
color: white; //font-color
}将类添加到我的styles.css中也不起作用。{class: "myOwnToastClass", title: "Hello World"}和{class: ".myOwnToastClass", title: "Hello World"}都没有做任何事情。有人能告诉我如何将我自己的自定义CSS传递给一个toast吗？documentation只是简单地说" class :将应用于toast的类。它可以用作引用。“但除此之外，没有关于如何使用它的文档。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-01-22 17:17:30
好吧。所以多亏了用户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
}然后像这样在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
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54256483
复制相关文章
相似问题
腾讯云开发者
