时间戳

首页 > 解决方案 > 如何为 React Bootstrap Typeahead 组件设置自定义高度？

reactjs - 如何为 React Bootstrap Typeahead 组件设置自定义高度？

问题描述

我已经导入了这个模块，因为我公司的 UI 库没有预先输入……但我希望该组件与我们的 UI 库文本字段的高度（64 像素）相匹配。

添加bsSize=lg仅使输入高度为 46px。

设置自定义style={{ height: '64px'}}似乎没有任何作用。

import { Typeahead } from 'react-bootstrap-typeahead';
import 'react-bootstrap-typeahead/css/Typeahead-bs4.css';

...

<div className="col-4">
  <div className="form-group my-4">
    <Text variant="p1">Name</Text>
      <Typeahead
        id="name"
        name="name"
        type="text"
        multiple={false}
        options={['Alice', 'Bob']}
        required
        bsSize="lg"
      />
  </div>
</div>

感谢您对此的任何见解，谢谢。

标签： reactjsreact-bootstrap-typeahead

解决方案

我刚刚检查了这个 typeahead 组件的实现，看起来您可以直接使用自定义 CSS 调整输入字段。

.rbt-input-hint-container input {
  height: 64px;
}

推荐阅读