React-select组件点击/聚焦时蓝色边框无法移除的求助

我正尝试移除React-select输入部分点击或聚焦时出现的蓝色边框，使用了以下代码但未生效：

control: (provided: any) => ({
  ...provided,
  background: "transparent",
  display: "flex",
  flexWrap: "nowrap",
  border: "none",
  "&:focus": {
    border: "none !important",
  },
  "&:select": {
    border: "none",
  },
  "&:hover": {
    border: "none",
  },
}),

menu: (provided) => ({
  ...provided,
  border: "none",
  boxShadow: "none",
}),
option: (provided) => ({
  ...provided,
  border: "none",
}),
};

解决方案 #

问题核心是React-select默认通过box-shadow实现聚焦高亮，而非border，调整样式配置如下：

const customStyles = {
  control: (provided: any) => ({
    ...provided,
    background: "transparent",
    display: "flex",
    flexWrap: "nowrap",
    border: "none",
    // 移除默认聚焦阴影
    boxShadow: "none",
    "&:hover": {
      border: "none",
      boxShadow: "none"
    },
    // 处理内部元素聚焦时的样式
    "&:focus-within": {
      border: "none",
      boxShadow: "none"
    },
    // 覆盖内部输入框的outline
    "& input": {
      outline: "none"
    }
  }),
  menu: (provided) => ({
    ...provided,
    border: "none",
    boxShadow: "none"
  }),
  option: (provided) => ({
    ...provided,
    border: "none"
  })
};

关键说明 #

• 聚焦状态的高亮默认由box-shadow实现，仅设置border: none无法移除蓝色边框；
• :focus-within确保组件内部元素（如输入框）聚焦时，也能同步移除高亮样式；
• 内部输入框自带outline，需单独覆盖避免额外边框。

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