我们能够自定义 Ionic Toast 关闭按钮吗？

Question

我试图为ionic提示框按钮添加背景颜色，但是没有成功。我在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'样式

- Deepak

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文件，在那里放置这个class。

.toast-bg {
  --background: blue;
  --button-color: #ffffff;
}

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

- Praise Hart

---

谢谢您的回答。这个方法可以很好地改变TOAST的背景颜色。我正在寻找覆盖TOAST按钮背景颜色的方法。 - Deepak

@Deepak 要更改按钮的颜色，只需将按钮的背景样式更改为适合您的样式，例如：style="background: blue;" 将其放在按钮标记中，或者您可以在类中添加"background: blue;" 并在按钮标记中调用该类 - Praise Hart

@PraiseHart，你有试过你建议的代码吗？你应该知道在toast中不能“将其放在按钮标签内”。另外，“background: blue within a class”也不起作用。 Deepak，你解决了吗？ - afe

@afe 是的，我已经使用我建议的代码来处理吐司了，它完美地工作了。如果使用普通的HTML按钮标签，您可以像我建议的那样添加一个样式属性，然后将背景颜色更改为任何您想要的颜色，如下所示：<button style="background: red;" type="button" onclick="myFunction()"> 点我！</button> 但是，如果使用ionic按钮标签，则可以像我展示HTML按钮标签一样使用样式属性，或者您可以创建一个CSS类来更改背景颜色，然后将该类添加到ion-buttons标签中。 - Praise Hart

@Deepak 如果你指的是 toast 弹出窗口内的按钮，那么你可以通过添加：--button-color: #ffffff; 到 toast-bg cssClass 来更改它。 - Praise Hart

Answer 2

在IONIC 5中，您可以使用CSS阴影和提示部分来应用自定义。例如，为了改变按钮的颜色，您可以简单地使用以下代码：

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

- user2642051