私のスタイリングがカスタムトーストクラスに適用されないのはなぜですか？

Question

ionic 2のdivをクリックしてカスタマイズしたToastを作成したいのですが、私のtsファイルにトーストを作成するときに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; 
    } 
}