내 스타일이 맞춤형 토스트 클래스에 적용되지 않는 이유는 무엇입니까?

Question

ionic 2로 div를 클릭 할 때 사용자 토스트를 만들고 싶습니다. tss 파일에서 토스트를 만들 때 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'); 
    } 

} 

하는 SCS

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

도움 바랍니다 여기 내 코드입니다!

Answer 1

토스트 스타일을 app.scss으로 옮기면 작동합니다.

예 :

app.scss

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