title: How can I style react-datepicker?
body: <p>I'm using <strong>webpack</strong>, <strong>react-datepicker</strong> and have managed to import its css with the provided css module.</p>
  
  <p><code>import 'react-datepicker/dist/react-datepicker-cssmodules.css</code></p>
  
  <p>The component looks fine and dandy, but now I want to make  it full width like the time element above it.</p>
  
  <p><a href="https://i.stack.imgur.com/Fw0lZ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Fw0lZ.png" alt="enter image description here"></a></p>
  
  <p>Looking at the CSS, what it needs is for the <code>react-datepicker-wrapper</code> element that gets dynamically added by the library to have <code>display: block</code>. Any modifications I make to <code>react-datepicker-wrapper</code> in my own css does nothing.</p>
  
  <p>What should I do?</p>
  
  <p><a href="https://i.stack.imgur.com/npOhF.png" rel="noreferrer"><img src="https://i.stack.imgur.com/npOhF.png" alt="enter image description here"></a></p>
  
  <p><strong>date-picker.component.jsx</strong></p>
  
  <pre><code>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) =&gt;
  touched &amp;&amp; isInvalid ? 'form-control is-invalid' : 'form-control';
  
  export const DatePickerBootstrap = (props) =&gt; {
    const { setFieldValue, setFieldTouched, errors, touched } = props;
    const { name, value, label, ...rest } = props;
  
    return (
  &lt;div className="form-group"&gt;
      &lt;label className='datePickerLabel' htmlFor={name}&gt;{label}&lt;/label&gt;
      &lt;DatePicker
      selected={value}
      onChange={(e) =&gt; {
        setFieldValue(name, e);
        setFieldTouched(name);
      }}
      className={buildClassNames(touched, !!errors)}
      customInput={
          &lt;input
          type="text"
          id={name}
          placeholder={label} /&gt;
      }
      {...rest}
      /&gt;
  
      &lt;div className="invalid-feedback"&gt;
          {errors}
      &lt;/div&gt;
  &lt;/div&gt;
    );
  };
  
  export default DatePickerBootstrap;
  </code></pre>