How can I set a custom height for a React Bootstrap Typeahead component?

Question

I've imported this module because my company's UI library doesn't have a typeahead...but I want the component to match the height of our UI library text fields (64px).

Adding bsSize=lg only makes the input height 46px.

Setting a custom style={{ height: '64px'}} doesn't seem to do anything.

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>

Would appreciate any insight on this, thanks.

Answer 1

I just checked my implementation of this typeahead component and it looks like you can adjust the input field directly with custom CSS.

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