css - 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
],