在 BlueprintJs DateInput 上添加 "small" 属性或 .bp3-small

Question

我在我的应用程序中使用来自 BlueprintJS 的控件，输入框上有一个名为 "small" 的属性，它添加了 class“.bp3-small”以减小字体大小和组件高度。但是，这似乎在 DateInput 控件上不可用。我尝试使用以下方法手动添加 class：

<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)}
                />

和：

<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)}
                />

但它仍然没有得到应用。我也试过只添加样式，但还是不行。

<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)}
                />

如何在所有 BlueprintJS 组件中使用小型样式？

我应该补充一点，我的 DateInput 在 FormGroup 中。我也尝试使用 FormGroup 的 contentClassName 属性但没有成功

谢谢，特洛伊

Answer 1

啊，我找到答案了。有一个名为 inputProps 的参数，它将属性传递给底层输入，因此它有效：

inputProps={{small: true}}

在 BlueprintJs DateInput 上添加 "small" 属性或 .bp3-small

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

javascript

reactjs

blueprintjs