How can I style react-datepicker?

Question

I'm using webpack, react-datepicker and have managed to import its css with the provided css module.

import 'react-datepicker/dist/react-datepicker-cssmodules.css

The component looks fine and dandy, but now I want to make it full width like the time element above it.

Looking at the CSS, what it needs is for the react-datepicker-wrapper element that gets dynamically added by the library to have display: block. Any modifications I make to react-datepicker-wrapper in my own css does nothing.

What should I do?

date-picker.component.jsx

import React from 'react'; import DatePicker from 'react-datepicker'; import 'react-datepicker/dist/react-datepicker-cssmodules.css'; import './date-picker.component.bootstrap.css';  // eslint-disable-next-line no-confusing-arrow const buildClassNames = (touched, isInvalid) => touched && isInvalid ? 'form-control is-invalid' : 'form-control';  export const DatePickerBootstrap = (props) => {   const { setFieldValue, setFieldTouched, errors, touched } = props;   const { name, value, label, ...rest } = props;    return ( <div className="form-group">     <label className='datePickerLabel' htmlFor={name}>{label}</label>     <DatePicker     selected={value}     onChange={(e) => {       setFieldValue(name, e);       setFieldTouched(name);     }}     className={buildClassNames(touched, !!errors)}     customInput={         <input         type="text"         id={name}         placeholder={label} />     }     {...rest}     />      <div className="invalid-feedback">         {errors}     </div> </div>   ); };  export default DatePickerBootstrap; 

Answer 1

I think you're just missing some CSS. Try this in your custom stylesheet (anywhere after the datepicker's stylesheet):

.react-datepicker-wrapper, .react-datepicker__input-container, .react-datepicker__input-container input {     display: block;     width: 100%; } 

Demo