为什么我的样式不适用于自定义Toast类？

Question

我想在点击带有离子2的div时创建一个自定义Toast，我在我的ts文件上创建toast时添加了一个cssClass，但是不会应用css。 这是我的代码：

notification.ts：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { ToastController } from 'ionic-angular';

/**
 * Generated class for the NotificationPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-notification',
  templateUrl: 'notification.html',
})
export class NotificationPage {

  constructor(public navCtrl: NavController, public navParams: NavParams, public toastCtrl: ToastController) {
  }

  ToastNotification() {
    const toast = this.toastCtrl.create({
      message: 'User was added successfully',
      duration: 100000,
      position: 'top',
      dismissOnPageChange: true,
      cssClass:  "custom-toast"

    });

    toast.onDidDismiss(() => {
      console.log('Dismissed toast');
    });

    toast.present();
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad NotificationPage');
  }

}

SCSS

.custom-toast {
            background-color: red;
            text-align: left;
        }

请帮助！

Answer 1

将你的吐司风格移到 app.scss ，它会起作用。

示例：

app.scss

.my-toast {
  .toast-wrapper {
    background: blue;
  }
}