如何修改React-Select输入值周围的环形样式？

我想要移除React-Select组件在以下场景下，光标周围显示的环形边框：

• 组件处于聚焦状态时
• 选中/输入值并显示在选择输入框时

我已经能通过React-Select的styles prop修改组件大部分样式，但这个环形边框一直改不掉。试过按照文档修改valueContainer的样式，但它只是包含占位符等内容的父容器，对目标环形无效。

我尝试过的styles代码：

// 试过包含和不包含baseStyles的写法
valueContainer: (baseStyles, state) => ({
  ...baseStyles,
  border: "none",
}),
singleValue: (baseStyles, state) => ({
 ...baseStyles,
 borderColor: "green",
}),

我的组件代码：

<Select
  className="w-1/3 mr-1"
  options={generateDayOptions()}
  value={selectedDay}
  onChange={(selectedDay) => setSelectedDay(selectedDay)}
  placeholder="Day"
  styles={{
    control: (baseStyles, state) => ({
      ...baseStyles,
      borderColor: "#6b7280",
      borderRadius: "0px",
      outline: state.isFocused ? "none" : undefined,
    }),
  }}
/>

不需要的环形边框截图：

解决方案 #

你看到的这个环形边框，其实是两个部分的样式叠加：

1. React-Select的control组件在聚焦时默认的box-shadow
2. 组件内部原生input元素的浏览器默认聚焦outline

只需要在styles中同时修改这两个部分的样式即可移除：

<Select
  className="w-1/3 mr-1"
  options={generateDayOptions()}
  value={selectedDay}
  onChange={(selectedDay) => setSelectedDay(selectedDay)}
  placeholder="Day"
  styles={{
    control: (baseStyles, state) => ({
      ...baseStyles,
      borderColor: "#6b7280",
      borderRadius: "0px",
      outline: state.isFocused ? "none" : undefined,
      // 移除control组件聚焦时的box-shadow
      boxShadow: state.isFocused ? "none" : undefined,
    }),
    // 修改内部input元素的样式，移除聚焦outline
    input: (baseStyles) => ({
      ...baseStyles,
      outline: "none",
      boxShadow: "none",
    }),
  }}
/>

如果还是有残留的样式，可以检查是否有全局CSS对input:focus的样式影响，此时可以给React-Select的input加上更强的样式优先级（尽量避免使用!important，优先用组件自带的styles覆盖）。

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