反应选择选择框上的边框颜色

Question

我目前正在尝试使用反应选择来设置选择框的边框颜色，我已经设法做到了这一点，但由于某种原因，当我激活选择框并将鼠标悬停在选项上时，选择框边框颜色的样式默认返回到蓝色。我似乎无法找到 DOM 中我需要定位的位置来更改此设置。问题是这样的：

当我悬停时，会显示正确的（橙色）边框颜色：

但是，当我将鼠标悬停在选项上时，默认的蓝色会显示在选择框周围。我希望它保持橙色：

这是我对选择框的实现。

const customStyles = {
  control: (provided: Record<string, unknown>) => ({
    ...provided,
    height: 52,
    '&:hover': {
      border: '1px solid #ff8b67',
      boxShadow: '0px 0px 6px #ff8b67',
    },
    '&:focus': {
      border: '1px solid #ff8b67',
      boxShadow: '0px 0px 6px #ff8b67',
    },
  }),
};
export default function CustomControl(): JSX.Element {
  // TODO: select defaultValue by user locale preference possibly
  return (
    <Select
      className="cult-select-box"
      styles={customStyles}
      defaultValue={countriesJSON[0]}
      formatOptionLabel={formatOptionLabel}
      options={countriesJSON}
    />
  );

谁能明白为什么会发生这种情况？

Answer 1

您必须StyleConfig从函数导入react-select并将react-states props 作为参数添加到函数中control。最后，使用isFocused在state. 所以，customStyles应该看起来像：

 const customStyles: StylesConfig = {
 control: (provided: Record<string, unknown>, state: any) => ({
    ...provided,
    height: 52,
    border: state.isFocused ? "1px solid #ff8b67" : "1px solid #cccccc",
    boxShadow: state.isFocused ? "0px 0px 6px #ff8b67" : "none",
    "&:hover": {
      border: "1px solid #ff8b67",
      boxShadow: "0px 0px 6px #ff8b67"
    }
  })
};