如何申請cssClass離子2烤麪包

Question

我跟着這個link爲我的烤麪包應用cssClass。

我有按鈕在我的HTML

<button ion-button (click)="presentToast()"> toast</button> 

這是我的.ts文件

presentToast() { 
    let toast = this.toastCtrl.create({ 
     message: "Press again to exit", 
     cssClass: "bottomToast", 
     position: 'bottom' 
    }); 

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

    toast.present(); 
    } 

這是我的app.css文件

.bottomToast{ 
    .toast-md .toast-wrapper { 
     position: absolute; 
     right: 0; 
     left: 0; 
     z-index: 10; 
     display: block; 
     margin: auto; 
     width: 40%; 
     max-width: 700px; 
     border-radius: 35px; 
     background: gray; 
     /* color: black; */ 
    } 

    .toast-md .toast-message { 
     padding: 19px 16px 17px; 
     font-size: 1.5rem; 
     /* color: #fff; */ 
     text-align: center; 
    } 
} 

我在吐司我檢查元素得到這個

<ion-toast role="dialog" class="toast-md bottomToast" aria-labelledby="toast-hdr-0" style="z-index: 19999;"><div class="toast-wrapper toast-bottom" style="transform: translateY(0%);"> <div class="toast-container"> <!--template bindings={ "ng-reflect-ng-if": "Press again to exit" }--><div class="toast-message" ng-reflect-id="toast-hdr-0" id="toast-hdr-0">Press again to exit</div> <!--template bindings={ "ng-reflect-ng-if": null }--> </div> </div></ion-toast> 

當我刪除.bottomToast並且只.toast-md .toast-wrapper和​​3210它工作正常

我想敬酒CSS是bottomToast類什麼我已經撥錯

Answer 1

你bottomToast裏面不是toast-md的父母。請嘗試：

ion-toast.bottomToast.toast-md { 
    .toast-wrapper.toast-bottom { 
     position: absolute; 
     right: 0; 
     left: 0; 
     z-index: 10; 
     display: block; 
     margin: auto; 
     width: 40%; 
     max-width: 700px; 
     border-radius: 35px; 
     background: gray; 
     /* color: black; */ 
    } 

    .toast-md .toast-message { 
    padding: 19px 16px 17px; 
    font-size: 1.5rem; 
    /* color: #fff; */ 
    text-align: center; 
} 
div#toast-hdr-0 { 
    text-align: center; 
} 
}