微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

ngx-toastr 样式在 Angular 9 中不起作用

如何解决ngx-toastr 样式在 Angular 9 中不起作用

我是 Angular 的初学者,我需要向预先存在的代码添加通知。我已经成功安装了 toastr 并且实际出现了通知 div,但就像 css 根本不起作用。

我在我的 scss 中使用这个:

@import '~ngx-toastr/toastr.css';

这是我的 html:

<div id="mydiv">
    <div>
        my content
    </div>
    
    <div toastContainer></div>
</div>

通知出现时,这大致是我的 html 上发生的情况:

<div id="mydiv">
    <div>
        my content
    </div>
</div>
<div>my toastr notification appear here</div>

问题是mydiv是全屏元素,所以通知隐藏在屏幕底部。我在检查元素时手动调整了 css,看来我的通知消息确实显示了,但 css 没有以某种方式工作,它没有任何样式,只有 mydiv 下方的纯文本。

不知何故,即使我把它放在里面,通知元素也会出现在 mydiv 之外。

我检查了浏览器上的 Sources 选项卡,node_modules/ngx-toastr/toastr.css 就在那里。不确定这是否意味着它已成功加载。

我的 Angular 9.1.12,ngx-toastr 12.1.0。

解决方法

您必须将样式文件添加到 angular.json 下的 styles

"styles": [
  "src/assets/styles/styles.scss","./node_modules/ngx-toastr/toastr.css"  // here
],

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。