如何将CSSClass应用于离子2吐司

Question

我遵循此链接，用于为我的吐司应用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 file

.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和.toast-md .toast-message时，它正常工作

我希望吐司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;
}
}