How to customize react-datepicker-wrapper class

Hello,

I’m not able to set width of datePicker to 100% .

The customization is applied to react-datepicker__input-container and input but not react-datepicker-wrapper.

import "./DatePickerInput.css";

<div className={style.containerDatePicker}>
   <DatePicker className={style.datePicker} dateFormat="dd/MM/yyyy" />
</div>

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

.datePicker {
  width: 100% !important;
}

also try this without success:

.react-datepicker__input-container {
    display: block !important;
}

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

.datePicker {
  width: 100% !important;
}

Version is “react-datepicker”: “^2.14.1”

Regards,

[sonny89]

Try with wrapperClassName property:

<DatePicker wrapperClassName="datePicker" dateFormat="dd/MM/yyyy" />

.datePicker {
  width: 100%;
}

[Cordazar]

But this should be a simple option or className set from the component, instead of adding global css rules to override it.