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

Question

我正在使用 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
             });
      }

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

Answer 1

您可以通过 css:

覆盖 link 样式

为您的 link 定义一个 class，例如"toastr-link"

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

在全局 style.scss 或 style.css 文件中，为 class ("toastr-link")

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

可以在这个 stackblitz 中找到完整的例子 link:

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

希望对您有所帮助！

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

Change ngx-toastr default style using enableHtml property. Angular 7

css

angular

ngx-toastr

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