React Toastify is broken while showing. How can I show react toastify correctly in the top of the page?

Question

Hi i am trying to show react toastify but it is not showing correctly. It's broken while showing.

Here is my code. import React from 'react'; import { toast, ToastContainer } from 'react-toastify';

const Toast = () => {
    const showToast = () => {
        toast('Hi there! I am react toastify.');
    }
  return (
    <div>
        <button onClick={showToast} className="btn btn-danger mt-5 d-block mx-auto">Click Here</button>
        <ToastContainer/>
    </div>
  )
}

export default Toast;

And it is output Here is the output

If I click on the button it's showing broken toast and it's not moving from the screen. How can I solve this problem please help me. Thanks in advance. <3

Answer 1

Are you importing the css as well? I think it's

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