react-datepicker input width will not adjust to 100%

I had the same issue and solved it thanks to Rbar's answer.

Wrap your DatePicker component with a custom container. Then assign the width to that container and its children like below:

import "./customDatePickerWidth.css";

<div className="customDatePickerWidth">
   <DatePicker dateFormat="dd/MM/yyyy" />
</div>

Inside the customDatePickerWidth.css:

.customDatePickerWidth, 
.customDatePickerWidth > div.react-datepicker-wrapper, 
.customDatePickerWidth > div > div.react-datepicker__input-container
.customDatePickerWidth > div > div.react-datepicker__input-container input {
   width: 100%;
}

Simple solution: Add this to your css file.

.react-datepicker__input-container {
  width: inherit;
}

.react-datepicker-wrapper {
  width: 100%;
}