React-Select选项点击后背景色异常变更问题求助

问题原因 #

react-select默认会给选项的hover、active（点击时）状态添加内置样式，这些样式会覆盖自定义设置的颜色，包括已选中选项再次点击时的active状态样式，导致颜色异常变化。

解决方案 #

通过styles属性自定义选项的各个状态样式，强制保持颜色一致：

• 定义自定义样式对象，覆盖option的默认样式，明确指定基础、选中、悬停、点击激活状态的颜色：

const customStyles = {
  option: (provided, state) => ({
    ...provided,
    // 自定义选中/未选中的文字与背景色
    color: state.isSelected ? '#fff' : '#333',
    backgroundColor: state.isSelected ? '#2ecc71' : '#fff',
    // 覆盖hover状态，保持与对应基础状态颜色一致
    ':hover': {
      backgroundColor: state.isSelected ? '#2ecc71' : '#f5f5f5',
    },
    // 覆盖active状态，防止点击时变色
    ':active': {
      backgroundColor: state.isSelected ? '#2ecc71' : '#f5f5f5',
    },
    // 移除默认焦点边框（可选）
    outline: 'none',
  }),
};

• 将自定义样式传入Select组件：

<Select
  options={options}
  styles={customStyles}
  isMulti // 若为多选组件需保留
  // 其他组件属性
/>

关键说明 #

• 通过state.isSelected区分状态，确保选中项的颜色不会被hover/active状态覆盖
• 显式设置:hover和:active的背景色，与对应状态的基础色完全一致，避免交互时颜色跳动
• 多选场景下，已选中选项再次点击会触发active状态，上述设置可保持选中样式稳定

内容的提问来源于stack exchange，提问作者Vo Thanh Tung