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

Question

I want to apply a custom Style to the Toasts I show with izitoast in my Angular application. I have installed and included the library according to instructions here I have included the izitoast css and script in my angular.json in addition to adding the module in my app-module and also managed to display a toast with a button in a component:

html-template (toaster.component.html)

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

corresponding typescript file (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"});
  }

}

I understand that if I want to apply custom styling I have to somehow specify the class in the object I pass into the the show() -function, but how do I do that? Writing a CSS-class in my toaster.component.css and just referencing the name doesn't work:

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

Adding the class into my styles.css doesn't work either. Neither {class: "myOwnToastClass", title: "Hello World"} nor {class: ".myOwnToastClass", title: "Hello World"} do anything. Can someone tell me how to pass my own custom CSS to a toast? The documentation simply says "class: The class that will be applied to the toast. It may be used as a reference." but other than that there is no documentation on how to use it.

Answer 1

Okay. So thanks to user fridoo I was able resolve it.

You have to add the class to your styles.css and be careful about the !important modifier:

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

Then reference it in the typescript files like so:

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
  }