使用 enableHtml 属性更改 ngx-toastr 默认样式。角 7答案

【问题标题】：Change ngx-toastr default style using enableHtml property. Angular 7使用 enableHtml 属性更改 ngx-toastr 默认样式。角 7
【发布时间】：2020-03-04 21:56:43
【问题描述】：

我正在使用 toastr 来显示消息，并且我有一个带有解决方案的 url 的错误消息，所以我使用 toastr 中的 enableHtml 属性来创建和 <a 元素并像这样传递 URL ：

if(!res){
        this.toastr.error('Revise los requisitos <a href=\"https://www.google.com\" target=\"_blank\">AQUI</a>',
        'title' , {
                 enableHtml: true,
                 closeButton: true,
                 timeOut: 10000
             });
      }

这工作正常，我想知道是否有办法更改链接的颜色和大小以替换 toastr 的默认样式。我知道这可以用自定义 toast 来制作，但这是我的代码中唯一需要它的部分，因此仅为一条消息创建整个 toast 是不值得的，这就是为什么我想知道是否使用 enableHtml属性我可以将新样式传递给链接或其他东西。

【问题讨论】：

你在用npmjs.com/package/ngx-toastr吗？
是的，我是@YuchaoWu

标签： css angular ngx-toastr

【解决方案1】：

您可以通过 css 覆盖链接样式：

为您的链接定义一个类，例如“toastr 链接”

<a href=\"https://www.google.com\" target=\"_blank\" class=\"toastr-link\">AQUI</a>

在全局 style.scss 或 style.css 文件中，为该类（“toastr-link”）定义覆盖的样式（例如，将字体颜色设为绿色）

.toastr-link{
    color: green !important;
}

完整的例子可以在这个 stackblitz 链接中找到：

https://stackblitz.com/edit/angular-q8xewq

希望对你有帮助！

【讨论】：