React建议以列表的形式显示

Question

我正在尝试在我的react应用程序中通过react-bootstrap-typeahead使用typeahaead，使用的示例与这个问题中提到的相同

React: Suggestion is not showing in the drop-down

根据这个问题的答案，我也导入了CSS文件。但是，当我单击typeahead框时，仍然会以列表的形式显示建议。

代码:使用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。