css - 如何覆盖 ngx-toastr 容器的宽度值？

Question

我正在寻找将 toastr 容器的宽度大小覆盖为 500 像素而不是默认的 300 像素。有没有办法在不扩展组件并创建新的自定义组件的情况下实现它？这是相关的 toastr.css 的 css 部分：

.toast-container .ngx-toastr {
  position: relative;
  overflow: hidden;
  margin: 0 0 6px;
  padding: 15px 15px 15px 50px;
  width: 300px; <--- this one I'd like to override
  border-radius: 3px 3px 3px 3px;
  background-position: 15px center;
  background-repeat: no-repeat;
  background-size: 24px;
  box-shadow: 0 0 12px #999999;
  color: #FFFFFF;
}

Answer 1

你应该像这样覆盖它：

::ng-deep #toast-container > div {
  width: 500px;
}

Answer 2

ngx-toastr 的作者。

您应该将 css 复制到您自己的全局样式并进行任何您想要的更改。css 一年多没有改变，所以你不会因为不从 node_module 导入它而损失很多。

不要使用 ng-deep 来执行此操作。