react-toastify: Toast style is not working correctly

You need to import the CSS file.

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

I import still not working!

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.

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)

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

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.

I switched to Red Hot Toast.

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

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.

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

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

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