Customise Ngx-toastr in angular 6 with typescript

Question

Hii All i am implementing Ngx-toastr in angular 6 with typescript my problem is that i can't make it beautiful as i want because i dont't know which css is override on that ngx-toastr class i wrote some css on Style.css File ngx-toastr and i want border-radius: 15px; but inner part not taking rounded corner with border-radius: 15px; I search many resource from the internet but not getting proper output and i Can't Change other toastr Because in my project something around 350+ Component i don't want to change on every file with method that's why i want to customize existing toastr CSS.

This is my Css Code

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

But My Expectation is I want same as in this picture if u want to check then visit this link and click on RESET button to show toastr Click Here to visit that site

Here is my StackBlitz Code

Answer 1

After Override this CSS in your Style.css File. I was able to customize this ngx-toastr with overriding this CSS

Note: Before overrride this css please check toastr class from dev tool console or inspect the element

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

Answer 2

Remove "border-image-source" from the 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: 4px solid green !important;
}

Also you can make a custom toast as your requirement. Please follow a below link to make a custom toast.

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

Answer 3

Remove White Box shadow you can use,

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