以列表形式显示的反应建议

Question

我正在尝试在我的反应应用程序中使用 typeaaead 通过 react-bootstrap-typeahead 使用与此问题中提到的相同示例

React: Suggestion is not showing in the drop-down

根据这个问题中提到的答案，我也导入了 CSS 文件。但是当我点击预先输入框时，建议仍然以列表的形式显示。

代码：使用 react-bootstrap-typeahead 的 Typeaheadsearch 类

import {Typeahead} from 'react-bootstrap-typeahead';
import { FormGroup, FormControl as Control } from 'react-bootstrap';
import 'react-bootstrap-typeahead/css/Typeahead.css';
import React, { Component } from 'react'

class Typeaheadsearch extends React.Component {
   state = {
    multiple: false,
  };

  render() {
    const {multiple} = this.state;

    return (
      <div>
        <Typeahead
          labelKey="name"
          multiple={multiple}
          options={[
            'Green',
            'Yellow',
            'Orange',
            'Red'
          ]}
          placeholder="Choose a name..."
        />
        <FormGroup>
          <Control
            checked={multiple}
            onChange={(e) => this.setState({multiple: e.target.checked})}
            type="checkbox">
          </Control>
        </FormGroup>
      </div>
    );
  }
}

export default Typeaheadsearch

我从我的 App.js 文件中调用这个类

代码：App.js

class App extends Component {

  render() {
    return <Typeaheadsearch />
  }
}

输出如图所示：

输出

有人可以帮忙吗？

我已经搜索了这个特定的 css 文件，它存在于我的项目中。另外，我尝试将此文件的内容复制到我的 .css 文件中，但仍然无法正常工作。

另外，我已经检查了 UI，并且存在这种提前类型的 CSS 元素。

Answer 1

react-bootstrap-typeahead 库旨在与Bootstrap styles 一起使用。您的项目中似乎还没有包含 CSS。