更改 Ionic Toast 中的超链接颜色

Posted 2023-03-13

【中文标题】更改 Ionic Toast 中的超链接颜色

【英文标题】：Change Hyperlink Color in Ionic Toast

【发布时间】：2021-05-14 00:17:24

【问题描述】：

我正在使用一项服务向用户展示 toast，并且我正在使用 innerhtml 通过 toast 中的超链接。吐司中的文字是白色的，背景是蓝色的。但是，我正在通过的锚标记中的超链接不可读，并且显示为比 toast 的背景略浅的蓝色。我只是希望它们与文本的其余部分颜色相同（白色）。

import  ToastController  from '@ionic/angular';

async presentToast(message, color, duration, position) 
    const toast = await this.toastController.create(
      message: message,
      duration: duration,
      color: color,
      position: position
    );
    toast.present();
  

然后我使用这样的服务：

 showToast()
   this.toastService.presentToast('Please <a href = \'https://www.google.co.uk\'  target= \'_blank\'> click me</a>', 'primary', 4000, 'top', );
  

以下是正在传递的原色：

--ion-color-primary: #0000A0;
--ion-color-primary-rgb: 66,140,255;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255,255,255;
--ion-color-primary-shade: #0000A0;
--ion-color-primary-tint: #0000A0;

有没有办法使用 css 类覆盖超链接颜色？或者我的原色中是否有一个值，我可以更改以获得所需的结果？

【参考方案1】：

两者都可以。如果您不想覆盖全局配置，请为您的元素分配一个类，然后应用 css 样式

.toast-link a 
color: ...; // whatever color you'd like

【讨论】：

感谢您的回答，不幸的是，这不起作用。我也尝试过 async presentToast(message, color, duration, position) const toast = await this.toastController.create( message: message, duration: duration, color: color, position: position, cssClass: "toast-link" ); toast.present();然后在我的全局 scss 中：ion-toast.toast-link a color: #fff

根据文档，如果将其设置为 toast 的基本元素，您应该能够使用以下内容：.toast-link --color: #fff;