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

【问题标题】：Can we customize ionic toast close button.?我们可以自定义离子吐司关闭按钮吗？
【发布时间】：2020-04-25 15:11:55
【问题描述】：

我正在尝试为离子吐司按钮添加背景颜色，但未能成功。我在 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

【问题讨论】：

标签： ionic-framework ionic2 ionic4

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

如果你想这样做，那么你应该使用 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 类中将颜色更改为您想要的任何颜色

【讨论】：

感谢您的回答。这可以很好地更改 TOAST 的背景颜色。我希望覆盖 toast 的 BUTTON 背景颜色。
@Deepak 要更改按钮颜色，只需将按钮的背景样式更改为适合您的样式，如下所示： style="background: blue;"把它放在按钮标签中，或者你可以把“背景：蓝色；”在一个类中并在按钮标签内调用该类
@PraiseHart 您是否尝试过您建议的代码？你应该知道你不能“把它放在按钮标签中”。此外，“背景：班级内的蓝色”也不起作用。 Deepak 你解决了吗？
@afe 是的，我已经使用我建议的代码进行了祝酒，而且效果非常好。如果使用普通的 HTML 按钮标签，您可以按照我的建议为其添加样式属性，然后将背景颜色更改为您想要的任何颜色：但是如果使用离子按钮标签，您可以使用我为 HTML 按钮标签展示的样式属性，或者您可以创建一个 css 类来更改背景颜色，然后将该类添加到 ion-buttons 标签跨度>
@Deepak 如果您指的是 toast 弹出窗口中的按钮，那么您可以通过添加来更改它： --button-color: #ffffff;到 toast-bg cssClass