为什么我的样式没有应用于自定义 toast 类？

Question

我想在使用 ionic 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

将你的 toast 样式移动到 app.scss 中，它会起作用。

示例：

app.scss

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