0

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:

enter image description here

but at demo it shows:

enter image description here

S.M_Emamian
  • 17,005
  • 37
  • 135
  • 254

2 Answers2

2

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

swk23C8
  • 314
  • 3
  • 10
0

Remove rtl={true} in ToastContainer;

https://fkhadra.github.io/react-toastify/enable-right-to-left-support

Adriaan
  • 17,741
  • 7
  • 42
  • 75
Keyboy
  • 1