Pourquoi mon style n'est-il pas appliqué à un cours de pain grillé personnalisé?

Question

Je veux créer un Toast personnalisé lorsque je clique sur un div avec ionique 2, j'ai ajouté un cssClass quand créer le toast sur mon fichier ts mais le CSS ne sera pas appliqué. voici mon code:

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

toute aide s'il vous plaît!

Answer 1

Déplacez vos styles de toast vers le app.scss et cela fonctionnera.

exemple:

app.scss

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