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

【问题标题】：react-select border color on select box选择框上的反应选择边框颜色
【发布时间】：2021-07-21 10:51:00
【问题描述】：

我目前正在尝试使用 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',
      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}
    />
  );

谁能明白为什么会这样？

【问题讨论】：

标签： css reactjs hover focus react-select

【解决方案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"
    }
  })
};

【讨论】：