How to style react-datepicker?

Sometimes, we want to style react-datepicker.

In this article, we’ll look at how to style react-datepicker.

How to style react-datepicker?

To style react-datepicker, we can set the wrapperClassName prop to a class name.

And then we can apply styles to that class name.

For instance, we write:

import React from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

export default function App() {
  return (
    <div>
      <style>
        {`.date-picker input {
          width: 100%
      }`}
      </style>
      <DatePicker wrapperClassName="date-picker" />
    </div>
  );
}

We set wrapperClassName to 'date-picker'.

And then we add some styles to the class in the style element.

We set the width of the input to 100%, so it’ll fill the whole container.

As a result, we should see the date picker input fill the whole container.

Conclusion

To style react-datepicker, we can set the wrapperClassName prop to a class name.

And then we can apply styles to that class name.