Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Toast style is not working correctly

See original GitHub issue

I installed last version of react-toastify.

When I use simple demo toast:

     toast.error("TEST", {
                position: toast.POSITION.BOTTOM_LEFT
            });

There is not “red” style - see image, why? What is wrong with my code?

In another component I have a <ToastContainer /> container.

Issue Analytics

State:
Created 5 years ago
Comments:16 (3 by maintainers)

Top GitHub Comments

76reactions

fkhadracommented, Jul 6, 2018

You need to import the CSS file.

import ‘react-toastify/dist/ReactToastify.css’;

8reactions

yasir-rafiqcommented, Mar 8, 2019

I import still not working!

Top Results From Across the Web

Toaster styling not being applied - angular - Stack Overflow

First, there is a new 5.0.0 version of angular2-toaster available that will definitively solve your No Toaster Containers have been initialized ...

How to style | React-Toastify - GitHub Pages

Passing css classes to component. The ToastContainer accept the following props for styling: className: applied to the container; toastClassName: applied on the ...

Using React-Toastify to style your toast messages

React-Toastify comes with a CSS file that must be imported for the tool to work. import { ToastContainer, toast } from 'react-toastify'; ...

Toasts · Bootstrap v4.6

Push notifications to your visitors with a toast, a lightweight and easily customizable alert message. Toasts are lightweight notifications designed to ...

ngx-toastr - npm

If you do not want to include @angular/animations in your project you can override the default toast component in the global config to...