React Bootstrap Typeahead选中样式异常，如何修复？

1. 移除错误的labelKey属性 #

你的options是字符串数组，并非包含name字段的对象数组，设置labelKey="name"会导致组件无法正确识别选项文本，进而影响选中项的样式渲染。直接删除这一行即可。

2. 引入组件专属样式 #

react-bootstrap-typeahead除了依赖Bootstrap的基础CSS，还需要加载自身的样式文件才能正常显示选中项的样式：

• 如果还没安装依赖，先执行安装命令：

npm install react-bootstrap-typeahead bootstrap

• 在App.js中添加组件样式的引入：

import Test from './test'
import 'bootstrap/dist/css/bootstrap.min.css';
import 'react-bootstrap-typeahead/css/Typeahead.css'; // 新增该行引入组件样式

function App() {
  return (
    <div className="App">
      <Test />
    </div>
  );
}

export default App;

修改后的完整test.js代码 #

import React, { useState } from 'react';
import { Typeahead } from 'react-bootstrap-typeahead';

const Example = () => {
  const [selected, setSelected] = useState([]);

  const options = ['Option 1', 'Option 2', 'Option 3', 'Option 4'];

  return (
    <Typeahead
      id="basic-typeahead-example"
      onChange={setSelected}
      options={options}
      placeholder="Choose an option..."
      selected={selected}
      multiple
    />
  );
};

export default Example;

完成以上操作后，组件的选中项样式即可恢复为你期望的效果。

内容的提问来源于stack exchange，提问作者CrabMeatPot