select 框上的 react-select 边框颜色

Question

我目前正在尝试使用 react-select 设置 select 框的边框颜色样式，我已经设法做到了，但由于某些原因，当我激活 select 框时鉴于 select 框边框颜色的样式默认恢复为蓝色，并将鼠标悬停在选项上。我似乎无法在 DOM 中找到我需要定位的位置来更改它。这是问题所在：

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

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

这是我对 select 框的实现。

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

您只需要从 react-select 导入 StyleConfig，并将 react-states 属性作为参数添加到 control 函数。最后在 state 中使用 isFocused。因此，将 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"
    }
  })
};

select 框上的 react-select 边框颜色

react-select border color on select box

css

reactjs

hover

focus

react-select