使用TypeScript在Angular 6中自定义Ngx-toastr

Question

大家好，我正在使用 TypeScript 和 Angular 6 实现 Ngx-toastr，但是我的问题是我不知道哪些 CSS 覆盖了它的 ngx-toastr 类，我在 Style.css 文件中编写了一些 CSS，并希望能够设置 border-radius: 15px;，但内部部分没有使用 border-radius: 15px; 的圆角。我在互联网上搜索了许多资源，但没有得到合适的结果。由于我的项目中有约 350+ 组件，我不想在每个文件中更改方法，因此我想自定义现有的 toastr CSS。

这是我的 CSS 代码：

.toast-container .ngx-toastr {
    position: relative;
    overflow: hidden;
    margin: 0 0 6px;
    padding: 15px 15px 15px 50px;
    width: 300px;
    border-radius: 15px !important;
    background-position: 15px center;
    background-repeat: no-repeat;
    background-size: 24px;
    box-shadow: 0 0 12px #999;
    color: #fff;
    border-image-source: linerar-gradient(red,purple) !important;
    border: 4px solid green !important;
    border-image-source: linear-gradient(red, purple) !important;
    border-image-slice: 20 !important;
}

.toast-success {
    background-color: #51a351;
}

但我期望的是，如果您想要检查，请访问此链接并单击重置按钮以显示toastr，我希望与这张图片一样。点击此处访问该网站

这里是我的StackBlitz代码

- Kiran Mistry

---

你能把边框改成2像素实心红色!important吗？看看这是否是你想要的。 - Sunny Parekh

不，我想要一些更圆润的角落，比如 border-radius: 15px;。 - Kiran Mistry

是的，那个还在。将边框半径保持为15像素，只需更改边框厚度和颜色即可。 - Sunny Parekh

但是您可以检查内部部分，确保其没有被圆角化，我也希望内部部分具有边框半径。 - Kiran Mistry

Answer 1

在您的Style.css文件中覆盖此CSS后，我能够通过覆盖此CSS来自定义这个ngx-toastr。

注意：在覆盖此CSS之前，请从开发工具控制台或检查元素中检查toastr类。

.toast-container {
  background-image: linear-gradient(purple,red) !important;
  border-radius: 22px !important; 
  box-shadow: -5px 8px 16px 0px rgba(0,0,0,0.3) !important;
  margin-bottom: 2px !important;
}

.toast-container .toast {
  margin: 2px !important;
  box-shadow: none !important;
  border-radius: 20px !important;
  background-color: #fff !important;
}

.toast-success{
  background-image: none !important;
}

.toast-success::after{
  content: '\f00c' !important;
  font-family: 'FontAwesome' !important;
  position: absolute !important;
  top: 14px !important;
  left: 15px !important;
  color: #333 !important;
  font-size: 1.5em !important;
}

.toast-title{
  color: purple !important;
  font-size: 16px !important;
}

.toast-message{
  color:#8f8f8f !important;
}

- Kiran Mistry

---

如果我需要从组件中执行它怎么办？ - eddy

Answer 2

去除白色盒子阴影，您可以使用以下代码：

.toast-container .ngx-toastr {
  box-shadow: 0 0 12px #3b3b3b !important;
}

- user10433420

Answer 3

从CSS中删除"border-image-source"

.toast-container .ngx-toastr {
    position: relative;
    overflow: hidden;
    margin: 0 0 6px;
    padding: 15px 15px 15px 50px;
    width: 300px;
    border-radius: 15px !important;
    background-position: 15px center;
    background-repeat: no-repeat;
    background-size: 24px;
    box-shadow: 0 0 12px #999;
    color: #fff;
    border: 4px solid green !important;
}

您也可以根据自己的需求制作自定义的Toast。请点击下面的链接进行自定义Toast的制作。

https://github.com/scttcper/ngx-toastr/blob/master/src/app/pink.toast.ts

- Dolar

---

你有什么问题？你想在烤面包上画一个红色的边框吗？ - Dolar

请检查，我已经为您添加了屏幕截图。 - Dolar

但是我想在边框上使用渐变颜色，不知道如何实现。我已经解决了没有渐变的问题，但无法解决边框渐变颜色的问题。 - Kiran Mistry