如何自定义react-select组件样式并移除默认蓝色边框

• 方案1：使用react-select官方提供的styles prop覆盖样式（最推荐，优先级最高，无样式冲突风险）
  你碰到的蓝色边框本质是组件focus状态自带的box-shadow属性，不是普通border，需要显式置空才会消失，示例代码如下：

import Select from 'react-select';

const customStyles = {
  // 覆盖外层容器样式
  control: (provided, state) => ({
    ...provided,
    border: 'none', // 移除默认边框
    boxShadow: 'none', // 移除focus状态蓝色阴影边框
    '&:hover': {
      border: 'none' // 可选：移除hover状态下的边框
    }
  }),
  // 覆盖输入框样式
  input: (provided) => ({
    ...provided,
    outline: 'none',
    boxShadow: 'none'
  })
}

// 组件调用时传入自定义样式
<Select 
  styles={customStyles}
  // 你的其他props
/>

• 方案2：全局CSS强制覆盖
  不要用动态ID选择器：react-select的输入框ID是渲染时动态生成的，序号会随渲染次数变化，写死ID必然失效。用组件自带的固定类名选择，加!important提升优先级即可，在你的全局style.css中写入以下代码：

.react-select__control {
  border: none !important;
  box-shadow: none !important;
}
.react-select__control:hover {
  border: none !important;
}
.react-select__input {
  outline: none !important;
  box-shadow: none !important;
}

• 补充排查点
  你之前在Chrome开发者工具中修改样式无效的核心原因是选错了元素：蓝色边框是加在类名为.react-select__control的外层容器上，不是加在input元素上，选中对应外层容器修改box-shadow和border属性即可实时看到效果。

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