React Select下拉菜单全蓝无选项高亮 如何恢复默认样式？

• 检查默认样式引入
  缺失默认样式文件引入是样式错乱的最常见原因，在组件的引入代码段添加如下代码即可：
  import 'react-select/dist/react-select.min.css';
  若你使用v5及以上版本的react-select，无需单独引入样式，检查项目配置是否关闭了默认样式注入即可。
• 排查类名冲突
  你给组件设置的className="select"命名过于通用，极易和项目内其他全局CSS规则冲突，导致react-select默认样式被覆盖，将该类名修改为更独特的命名（例如tdc-select）即可排除该问题。
• 补充选项样式配置
  你当前的自定义styles仅修改了输入控制栏的样式，未涉及选项规则，若前两项操作后选中高亮仍未恢复，可以在styles中补充option的配置，手动指定状态表现：

  styles={{
    control: (provided, state) => ({
      ...provided,
      boxShadow: 'none',
      borderBottom: this.state.isEmpty2 ? '2px solid red' : '1px solid black',
    }),
    option: (provided, state) => ({
      ...provided,
      // 配置选中、hover状态的样式，和默认效果保持一致
      backgroundColor: state.isSelected ? '#2684FF' : state.isFocused ? '#DEEBFF' : '#ffffff',
      color: state.isSelected ? '#ffffff' : '#000000',
      cursor: 'pointer'
    })
  }}
  

如果需要完全恢复默认效果，可以先临时删除整个styles属性，确认默认样式正常渲染后再逐步添加你需要的底部边框自定义规则。

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