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

Question

我是 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。

Answer 1

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

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