javascript - 在 BlueprintJs DateInput 上添加“small”属性或 .bp3-small
问题描述
我在我的应用程序中使用来自 BlueprintJS 的控件,并且输入框上有一个名为“small”的属性,它向其中添加了类“.bp3-small”以减小字体大小和组件高度。但是,这似乎在 DateInput 控件上不可用。我试过手动添加类:
<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 属性但没有成功
谢谢,特洛伊
解决方案
啊,我找到了答案。有一个名为 inputProps 的参数将属性传递给底层输入,因此它可以工作:
inputProps={{small: true}}
推荐阅读
- json - 清单不是有效的 JSON。行:12,列:2,不允许尾随逗号
- android - 应用程序链接在 Android 中无法按预期工作
- python - 如何在 python 中使用安装文件安装私有 github 存储库
- javascript - 在基于 id 分配的两个 javascript 文件之间成功传递变量
- laravel - Laravel Artisan::queue 无限循环
- hibernate - Hibernate 一对多和多用。如何引用现有值而不是插入已发布的值
- python-3.x - dask jobqueue 无法创建客户端调度程序和工作人员
- sql-server - 从函数或存储过程返回动态 SQL 表以在查询中使用
- html - 卡上的点击事件未在克隆项目 owl-carousel 2 上触发
- javascript - 制作 Leaflet 地图时出现“t is undefined”错误?