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

Question

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)?

Answer 1

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' }} … />