更改 toast 消息 Ionic 4 的背景颜色

Posted 2023-03-06

【中文标题】更改 toast 消息 Ionic 4 的背景颜色

【英文标题】：Change the background color of the toast message Ionic 4

【发布时间】：2019-07-21 03:25:00

【问题描述】：

如何更改 toast 消息的背景颜色？

我试过这个：但没有运气。是因为shadow DOM 效应吗？

variable.scss

--background:red;

global.scss

ion-toast>.toast-wrapper 
    background-color: red !important;

.ts

  async showErrorToast(data: string) 
    const toast = await this.toastCtrl.create(
      message: data,
      duration: 3000000,
      position: 'bottom'
    );
    toast.present();
  

【问题讨论】：

如果你只尝试这个.toast-wrapper background-color: red !important;

我试过了。但它从未被应用。是因为Shadow DOM吗？ @TemaniAfif

是的，这是因为阴影，我注意到了这一点.. CSS 应该添加到里面

我怎样才能破解这个？ @TemaniAfif

【参考方案1】：

您可以使用应用程序调色板中的颜色。默认选项为：primary、secondary、tertiary、success、warning、danger、light、medium 和 dark。

async showErrorToast(data: string) 
    const toast = await this.toastCtrl.create(
      ...
      color: 'primary'
    );
    toast.present();
  

更多详情Ionic docs

【参考方案2】：

可以在toast参数中设置颜色：

 const toastController = document.querySelector('ion-toast-controller');
 await toastController.componentOnReady();
 const toast = await toastController.create(
   showCloseButton: false,
   message: 'test toast message',
   position: 'top',
   duration: 2000,
   color: 'danger'
 );
 await toast.present();

【参考方案3】：

确保您在公共 .scss 文件中声明了样式类。我认为它在 Ionic 3 中称为 app.scss，在 Ionic v4 中称为 global.scss。

【参考方案4】：

在创建 toast 时添加 cssClass 属性并为其添加类名

 async showErrorToast(data: string) 
    const toast = await this.toastCtrl.create(
      message: data,
      duration: 3000000,
      position: 'bottom',
      cssClass: 'toast_style'
    );
    toast.present();
  

添加样式类

.toast_style 
background-color:red;

在此处参考 toast 的 ionic 文档toast

【参考方案5】：

首先像这样定义类：

.toast-bg 
background-color:red;

然后将类作为参数传递给 toast 选项，如下所示：

    message: data,
    duration: 3000000,
    position: 'bottom',
    cssClass:'toast-bg'