如何在保留react-select原有样式的基础上自定义部分样式

问题根因 #

你之前的样式完全被覆盖是因为customStyles的control配置没有继承react-select提供的默认样式对象provided，直接返回了仅包含width的新对象，直接替换了所有内置基础样式。

正确的customStyles配置 #

const customStyles = {
  // 输入框容器样式
  control: (provided, state) => ({
    ...provided, // 必须保留，继承所有默认基础样式
    width: 200,
    // 覆盖focus状态的边框样式，解决点击变色问题
    borderColor: state.isFocused ? '#ccc' : provided.borderColor, // #ccc替换为你原有默认边框色即可
    boxShadow: state.isFocused ? 'none' : provided.boxShadow,
    '&:hover': {
      borderColor: state.isFocused ? '#ccc' : provided.borderColor,
    }
  }),
  // 下拉弹框容器样式
  menu: (provided) => ({
    ...provided,
    border: 'none', // 移除下拉选项外边框
    boxShadow: 'none' // 若默认带阴影可同步移除
  }),
  // 单个下拉选项样式
  option: (provided, state) => ({
    ...provided,
    textAlign: 'right', // 下拉选项右对齐
    // 自定义选中、hover状态背景色，可自行修改色值
    backgroundColor: state.isSelected ? '#165DFF' : state.isFocused ? '#f0f0f0' : provided.backgroundColor,
    // 文字颜色默认继承原有配置，需要自定义可自行调整
    color: state.isSelected ? '#fff' : provided.color
  }),
  singleValue: (provided, state) => {
    const opacity = state.isDisabled ? 0.5 : 1;
    const transition = 'opacity 300ms';
    return { ...provided, opacity, transition };
  },
};

配置说明 #

所有配置项都先展开provided默认样式，仅覆盖需要修改的属性，完全不会破坏原有基础样式，同时满足你的所有需求：

• 下拉选项周围无外边框：通过menu配置移除border实现
• 下拉选项右对齐：通过option的textAlign: 'right'实现
• 保留原有默认颜色：除了选中/hover状态的背景色外，其余颜色均继承默认值
• 选项选中和hover状态自定义背景色：通过option配置中判断state.isSelected和state.isFocused设置对应背景色即可
• 点击输入框不触发边框颜色变化：通过control配置覆盖focus状态的borderColor和boxShadow实现

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