Display of component is wonky

[scottyj503]

Describe the bug I loaded a test site ( npm create vite@latest datepicker-test -- --template react-ts ) and installed react-datepicker. With the following code:

import { useState } from "react";
import "./App.css";
import DatePicker from "react-datepicker";

const Example = () => {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <DatePicker selected={startDate} onChange={(date) => setStartDate(date)} />
  );
};
function App() {
  return <Example />;
}

export default App;

I am seeing:

Here is my App.css:

#root {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

I am running OS X and the screenshot is from Chrome. I am seeing the same thing on Firefox.

I am expecting:

I presume I am doing something dumb here. 🙃

[mateokurti]

From the README.md:

You will also need to require the CSS file from this package (or provide your own). The example below shows how to include the CSS from this package if your build system supports requiring CSS files (Webpack is one that does).

So, adding this to you imports should resolve the issue:

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

[kng0111]

Rewrite the code and refresh it