Search code examples
reactjslayoutjsxreact-datepicker

React-DatePicker layout problem. Does someone know how to fix it?

I'm trying to use React Date Picker but when I import the component and use it, the layout is very strange. Can Someone help me please ?

Layout

Code:

import DatePicker from "react-datepicker";
import React, {useState} from "react";

function App() {
  const [startDate, setStartDate] = useState(null);
  return (
      // <TournamentCreationPage/>
      <DatePicker
          locale="fr"
      />
  );
}

export default App;

Thank you in advance,

Solution

  • You will need to import the css as in the documentation:

    import "react-datepicker/dist/react-datepicker.css";

    https://www.npmjs.com/package/react-datepicker