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.

[kiily]

I am observing the styles not applying fully in production too but it used to work! I suspect it is some change we have made to the CSS toolchain. We are using next with tailwind

[fkhadra]

please open an issue next time. If the issue has been already closed it's hard for me to keep track. @kiily this is more likely an issue with your toolchain. It should just work with nextjs. An alternative solution would be to inject the stye on demand https://fkhadra.github.io/react-toastify/how-to-style/#inject-style-on-demand

[kiily]

It was what we suspected, tailwind purgecss issue. After adding the react-toastify styles to the array it started working again

purge: {
    mode: 'all',
    content: [
      './{components,pages,layout}/**/*.{jsx,tsx}',
      'node_modules/react-toastify/dist/ReactToastify.css',
    ],
  },

For the record, prior to this error, I had seen no issues with the react-toastify lib and using it in Next.js.

[sainiankit]

import 'react-toastify/dist/ReactToastify.min.css'; instead of import 'react-toastify/dist/ReactToastify.css';

Solved it for me. (Was not able to see proper css in Production Builds)

[iraqwarvet31]

Having same exact issue. @sainiankit did not solve my issue though. No css styles are being applied and I suspect it has something to do with bootstrap overriding them. We definintely need a fix here.

[Snapperfish]

I switched to Red Hot Toast.

[johnnytolengo]

The same issue here, after build there are not css styles. I don't know how to fix it. :(

[techiekarthick]

The same issue here.. css not loading.. can i help me how to fx ;(

[fkhadra]

@techiekarthick try injecting the style on demand https://fkhadra.github.io/react-toastify/how-to-style/#inject-style-on-demand

[ru-zxr]

I removed PurgeCSSPlugin from my webpack config and the toast style is working.

[demitrious-tom]

@Kordrad thanks that solution helped, I had debated doing this as I have been having this same issue with Webpacker and Rails 6. I am leaving this as a bread crumb for those legacy Webpacker users having issue with react-toastify css style loading issues (react-toastify/dist/ReactToastify.css) in production.

[contactodohgerald]

this actually worked for me, thanks @fkhadra

[megaz0rd]

yes, I had the same issue with PurgeCSS and Toastify - injecting style like @fkhadra said solve the problem. thanks

[ayushsgithub]

You need to import the CSS file.

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

Thank You, it's working now!

[yasuracreation]

You need to import the CSS file.

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

Thank You, it's working now!

did this worked in prod build , I am having CSS loading issue in production

[Divyanshukothari]

@sainiankit this worked thanks