如何修改React Select组件选项的默认浅蓝色悬停背景色？

完全可以修改React Select选项的默认浅蓝色悬停背景色，而且不会受原生select的样式限制影响——因为React Select的下拉选项并非使用原生<option>标签实现，而是基于自定义的DOM元素（如<div>），所以你提到的原生select无法修改hover背景色的问题对它不适用。

你当前的样式配置没有针对选项（option）做设置，只需要在styles对象中添加option属性，即可自定义悬停状态的样式：

const styles = {
  control: (base: {}, state: {}) => ({
    ...base,
    background: "#1b1d25"
  }),
  menu: (base: {}) => ({
    ...base,
    borderRadius: 0,
    marginTop: 0,
    background: "#1b1d25"
  }),
  menuList: (base: {}) => ({
    ...base,
    padding: 0,
    background: "#1b1d25"
  }),
  // 自定义选项的样式（包括悬停状态）
  option: (base: {}, state: {}) => ({
    ...base,
    // 默认背景色，与菜单保持一致
    background: state.isSelected ? "#2a2d38" : "#1b1d25",
    color: "#ffffff", // 可选：设置文字颜色保证深色背景下的可读性
    // 悬停时的背景色
    "&:hover": {
      background: "#2a2d38" // 替换为你想要的悬停颜色
    }
  })
};

<Select
  options={options}
  value={{ label: currentAnswer, value: currentAnswer }}
  onChange={(e) => handleChange(e.value)}
  styles={styles}
  theme={(theme) => ({
    ...theme,
    borderRadius: 0,
    colors: {
      ...theme.colors,
    },
  })}
/>

关键说明： #

• option函数接收两个参数：base（组件默认样式）和state（包含当前选项的状态，如isSelected、isFocused等）。
• 通过&:hover伪类直接定义悬停样式，完全不受原生浏览器的限制，因为这些选项是自定义DOM元素。
• 如果你想通过theme统一调整，也可以修改theme.colors中的相关属性（比如colors.primary对应选中状态，colors.neutral30可对应悬停状态），但直接通过styles.option定制会更灵活精准。

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