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

问题描述

我目前正在尝试使用 react-select 来设置选择框的边框颜色的样式，但由于某种原因，当我激活选择框并将鼠标悬停在给定选择框边框颜色样式的选项上时默认恢复为蓝色。我似乎无法在 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',}),};
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}
    />
  );

谁能看出为什么会这样？

解决方法

您只需要从 StyleConfig 中导入 react-select，同时将 react-state 的 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"
    }
  })
};

focus hover react-select reactjs reactjs