我们可以自定义离子吐司关闭按钮吗？

Question

我正在尝试为离子吐司按钮添加背景颜色，但无法成功。我在global.scss中的CSS下面尝试过。有人可以告诉我如何做到这一点。

  .positive-toast-message {
       --min-width: 60%;
       --background: #bde7c3;
       --color: black;
       --button-color: black;
       .toast-button {
        --background: red !important;
        background: white !important;
        background-color: blue !important;
       }
   }

一旦创建Toast，它将正确应用'positive-toast-message'CSS

Answer 1

如果要这样做，则应使用css类。像这样叫吐司

const toast = await this.toastCtrl.create({
    message: 'Please Fill all fields',
    duration: 30000,
    position: 'top',
    cssClass: 'toast-bg'
  });

  toast.present();

然后转到global.scss文件并将此类放在此处

.toast-bg {
  --background: blue;
}

这应该有效。将颜色更改为global.scss中css类中所需的任何颜色]