在 Ionic 4 中更改吐司消息的颜色？

Question

这是我创建的吐司：

const toast = await this.toast.create({
        showCloseButton: true,
        message: 'Please Fill Data',
        duration: 30000,
        position: 'bottom',
        cssClass:'iontoast'
      });
      toast.present();

我应用的样式：

iontoast{
    .toast-message{
        --background:white !important;
        --color:black !important;
    }
    .toast-container
    {
        --background:white !important;
        --color:black !important;
    }
}

我也试过这个：

ion-toast{
 --background:white !important;
 --color:black !important;
}

他们两个都没有为我工作。我应该如何将它应用于android和ios？谢谢！

Answer 1

1. 颜色属性可以作为选项传递，请看下面

await this.toastController.create({
            message: 'Hello World',
            color: 'danger',
            duration: 2000,
            position: 'top',
            showCloseButton: true,
            closeButtonText: 'Close'
        });

您可以传递任何其他颜色以及主题/variable.scss 文件中提供的主要、次要、成功等。

2. 使用您的自定义 css 类，您需要在自定义 css 类之前添加 ion-toast，请看下面

ion-toast.my_custom_class {
      // Css rules or using css custom properties
}

并将您的自定义类名传递给 toast 控制器