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

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

Answer 2

在 IONIC 5 上，您可以简单地使用 CSS 阴影和吐司部分来应用您的自定义。

例如，为了更改按钮的颜色，您可以简单地使用以下代码：

ion-toast::part(button) {
  --button-color: var(--ion-color-tertiary) !important;
  --color: var(--ion-color-tertiary) !important;
}

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

2 个答案: