Search code examples
javascriptreactjsreact-day-picker

`DatePickerInput` "className" property for `<input />`

I'm using the DatePickerInput react component and want to style the <input /> element inside. With the component's className property I can only style the <div /> container around. Using classNames object property also styles other containers.

So is it possible and if it is, how, to apply a CSS class directly to the <input /> element (I'm using Bootstrap so I want to add the class "form-control" for consistency)?

Solution

  • Use the inputProps prop to pass a className prop explicitly to the input. This prop should be an object with key/value pairs corresponding to the props for the input:

    <DayPickerInput inputProps={{ className: 'form-control' }} … />