Add "small" attribute or .bp3-small on BlueprintJs DateInput

Question

I'm using controls from BlueprintJS in my application and there is an attribute on the input box called "small" that adds the class ".bp3-small" to it to reduce the fontsize and component height. However this doesn't seem to be available on the DateInput control. I've tried adding the class manually with:

<DateInput className="bp3-small"
                    showActionsBar={true}
                    small={true}
                    closeOnSelection={true}
                    value={props.data[props.fieldId]}
                    onChange={(newDate) => {
                        props.mutator(props.fieldId, newDate)
                    }}
                    popoverProps={{ position: Position.BOTTOM }}
                    formatDate={ date => date.toLocaleString()}
                    parseDate={str => new Date(str)}
                />

and:

<DateInput className=".bp3-small"
                    showActionsBar={true}
                    small={true}
                    closeOnSelection={true}
                    value={props.data[props.fieldId]}
                    onChange={(newDate) => {
                        props.mutator(props.fieldId, newDate)
                    }}
                    popoverProps={{ position: Position.BOTTOM }}
                    formatDate={ date => date.toLocaleString()}
                    parseDate={str => new Date(str)}
                />

but It's still not getting applied. I also tried just adding the styles but still no luck.

<DateInput style={{fontSize: "12px", height:"24px"}}
                    showActionsBar={true}
                    small={true}
                    closeOnSelection={true}
                    value={props.data[props.fieldId]}
                    onChange={(newDate) => {
                        props.mutator(props.fieldId, newDate)
                    }}
                    popoverProps={{ position: Position.BOTTOM }}
                    formatDate={ date => date.toLocaleString()}
                    parseDate={str => new Date(str)}
                />

How can I use the small style across all BlueprintJS components?

I should add that my DateInput is inside a FormGroup. I also tried using the contentClassName attribute of FormGroup without success

Thanks, Troy

Answer 1

Ah, I found the anwswer. There's a paramater called inputProps that passes properties to the underyling input so this works:

inputProps={{small: true}}