更改吐司消息 Ionic 4 的背景颜色

Question

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

我试过这个：但没有运气。这是由于 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();
  }

Answer 1

首先像这样定义 class :

.toast-bg {
background-color:red;
}

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

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

}

Answer 2

创建 toast 时添加 cssClass 属性并向其添加 class 名称

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

添加样式class

.toast_style {
background-color:red;
}

在此处参考 toast 的离子文档 toast

Answer 3

确保在 public .scss 文件中声明样式 class。我认为它在 Ionic 3 中称为 app.scss，在 Ionic v4 中称为 global.scss。

Answer 4

可以在吐司参数中设置颜色：

 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();

Answer 5

您可以使用应用程序调色板中的颜色。默认选项为：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

Answer 6

此解决方案适用于 ionic v4 和 ionic v6：

首先使用离子属性“--background”定义背景颜色（class不需要在global.scss中定义）

.toast-background {
    --background: rgb(175,175,175);
}

然后在启动 toastController

时引用新的 class

const toast = await this.toastCtrl.create({
    message: 'Message Here.',
    duration: 30000,
    cssClass: 'toast-background'
});
toast.present();

更改吐司消息 Ionic 4 的背景颜色

Change the background color of the toast message Ionic 4

html

css

typescript

angular

ionic4