React-toastify: Toast style is not working correctly

[JaLe29]

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.

[fkhadra]

You need to import the CSS file.

import 'react-toastify/dist/ReactToastify.css';

[yasir-rafiq]

I import still not working!

[Monkey-D-Code]

Working for me in the development but not after building
Developement Server :

After Build In production :

[Kordrad]

I have the same issue.

In my project, I made a new file toast.css and pasted styles from this path: node_modules/react-toastify/dist/ReactToastify.css.

And in my file I import something like this:

import './toast.css';
import 'react-toastify/dist/ReactToastify.css';

Then i can build my app with styles from Toastify.

[pavlobu]

I have same issue.

No, simply importing css does not help at all.

It seams tricky to add react-toastify to already mature react app.
Seems the only way to make it work is to add it to your react app from very beginning (right after you run create-react-app etc.) with little or none boilerplate code, otherwise it is not working straight out of the box when I try to add it to my blueprintjs or material-ui based app..

Had to switch over to react-toast-notifications
that really worked out of the box with no effort, just plugged it to my already existing code

And react-toast-notifications
is also can be used as a react hook, which is kind of awesome.