4

大家好，我正在使用打字稿在 Angular 6 中实现 Ngx-toastr，我的问题是我无法让它变得像我想要的那样漂亮，因为我不知道在那个ngx-toastr类上覆盖了哪个 css，我在Style上写了一些 css 。 css文件ngx-toastr，我想要border-radius: 15px;，但内部部分没有采用圆角，border-radius: 15px;我从互联网上搜索了许多资源，但没有得到正确的输出，我无法更改其他 toastr，因为在我的项目中，我不想要大约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;
}

但是我的期望是，如果您想检查，我希望与这张图片中的相同，然后访问此链接并单击RESET按钮以显示 toastr单击此处访问该站点

在此处输入图像描述

这是我的StackBlitz 代码

4

3 回答 3

10

在您的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;
}
于 2019-12-13T08:43:35.530 回答
1

删除您可以使用的白盒阴影，

.toast-container .ngx-toastr {
  box-shadow: 0 0 12px #3b3b3b !important;
}
于 2021-08-05T15:12:43.240 回答
-1

从 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;
}

在此处输入图像描述

您也可以根据需要制作自定义吐司。请按照以下链接制作自定义吐司。

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

于 2019-12-13T06:00:28.243 回答