使用箭头键悬停时如何设置 React-Select Option 组件的背景颜色

Question

我可以在鼠标悬停时设置选项（React-Select）的背景颜色（如下面的代码所示）...我不明白的是如何设置背景颜色当我使用键盘上的箭头键时的一个选项。向下/向上键可以选择一个选项，但当我使用箭头键（向上/向下）将其定位在选项上时，我无法更改其背景颜色

<Select
    placeholder="Month"
    styles={{
       option: (base) => ({
           ...base,
           cursor: "pointer",
           background: "white",   // this was the mistake (I needed to remove this)
           ":hover": {
              backgroundColor: "rgb(200, 200, 200)",
            },
     }}
/>

Answer 1

const customStyles = {
    option: (base, { data, isDisabled, isFocused, isSelected }) => {
    return {
      ...base,
      backgroundColor: isFocused ? "red" : "blue",
    };
  }
};

const options = [
  { value: "aaa", label: "aaa" },
  { value: "bb", label: "bb" },
  { value: "cc", label: "cc" }
];

 <Select
    label="Single select"
    options={options}
    styles={customStyles}
  />

请使用 isFocused 代替。希望它能有所帮助