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

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

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

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

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

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

，然后将您的自定义类名称传递给Toast Controller

Answer 2

要更改吐司按钮的颜色，对我有效的解决方案是：

let toast = this.toastCtrl.create({
  message: 'your toast message text',
  duration: 3000,
  cssClass: 'toast-error',
  showCloseButton: true,
  closeButtonText: 'Undo'
});

并在我的CSS文件中：

page-my.page.scss.name {
        // my regular css code
}

.toast-error .button-inner {
    color: color($colors, danger);
}

如果您还想更改祝词的背景颜色，请在scss文件中添加以下代码：

.toast-container {
    background-color: #a5a0a0;
}

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

2 个答案: