ionic-framework - 我们可以自定义 ionic toast 关闭按钮吗？

Question

我正在尝试为 ionic toast 按钮添加背景颜色，但未能成功。我在 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 类。像这样调用 toast

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;
  --button-color: #ffffff;
}

这应该有效。在 global.scss 的 css 类中将颜色更改为您想要的任何颜色