Laravel yoeunes/toastr getting white background and white text

Question

I am using laravel 7. Here I used yoeunes/toastr ( https://packagist.org/packages/yoeunes/toastr ) . But the background color of the toastr and text color is white. also tried other toastr also. Happening the same thing. When I am removing all my layouts file ( js,jquery,css linked header file) the toastr works fine .but with the layouts file the toastr is not working.

I used the code as documantation

Answer 1

use @toastr_css after your layouts file ( js,jquery,css linked header file) . After extending layout use the @toastr_css in the section part like this

 @extends('layouts')
 @section('content')
 @toastr_css
 ....your code....
 
 @jquery
 @toastr_js
 @toastr_render
 @endsection

then it will not affect your layout file

Answer 2

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" integrity="sha512-vKMx8UnXk60zUwyUnUPM3HbQo8QfmNx7+ltw8Pm5zLusl1XIfwcxo8DbWCqMGKaWeNxWA8yrx5v3SaVpMvR3CA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Put the css for the toastrjs at the bottom of the page.As @kapitan has stated in the comments turned-out that the css was overridden by other css files.

Answer 3

As alternative you can use in your site.css the following code:

/***toastr - NOTIFICATION **************************************************/

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

.toast-error {
    background-color: #bd362f !important;
}