I am currently implementing the react-toastify library.
Within my _app.tsx file:
import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
...
return (
<AppStateProvider>
<MainProvider>
<HeaderProvider>
<Component {...pageProps} />
<ToastContainer
position="top-right"
autoClose={5000}
hideProgressBar={false}
newestOnTop={false}
closeOnClick
rtl={true}
pauseOnFocusLoss
draggable
pauseOnHover
/>
</HeaderProvider>
</MainProvider>
</AppStateProvider>
);
}
When using the library in my component:
toast.success("success")
However, in my implementation it displays like this:
https://i.sstatic.net/P3g4I.png
Contrastingly, the demo shows: