I'm using react-toastify.
_app.tsx:
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>
);
}
in my component:
toast.success( "success")
but it shows like this:
but at demo it shows:
Here goes my first answer on SO! Ran into a similar situation while trying out React-Toastify as well.
Basically you need to state the theme you want your toast to be.
e.g.
toast.success("success", {
theme: "colored"
})
"colored" is the theme you are looking for
toast.success("success", {
theme: "dark"
})
"dark" is also available.
If you don't provide any themes you get the result in the picture you uploaded in the question