Hello everyone, I am currently working on implementing Ngx-toastr in Angular 6 with Typescript. My main issue is that I am struggling to achieve the desired visual appearance because I'm uncertain about which CSS styles are overriding the ngx-toastr class. I have written some CSS in the Style.css file for ngx-toastr where I specified a border-radius of 15px, but unfortunately, the inner part is not displaying rounded corners as intended. Despite searching various online resources, I haven't been able to find a satisfactory solution. Making changes to other toastr components is not feasible for me due to the large number of components (350+) in my project. Therefore, I need to figure out a way to customize the existing toastr CSS.
Below is the CSS code snippet that I have used:
.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;
}
My objective is to replicate the design shown in this picture. You can see it by visiting this link and clicking on the RESET button to trigger the toastr notification here.
https://i.sstatic.net/a8Xcw.png
You can access my code on StackBlitz here.