无法更改所选选项的背景颜色 | 反应选择

Question

我正在使用 React 选择组件来进行下拉选择。所有功能都工作正常，但当从下拉列表中选择选项时，我无法设置所选选项背景颜色的样式。尝试了几个选项，但也不起作用。

下面是相同的代码：-

import React, { useContext, useState } from "react";
import moment from "moment";
import Select from "react-select";
import DataProvider from "context/DataContext";

export default function Compare() {
  const [selectedValue, setSelectedValue] = useState([]);
  const {
    fromDate,
    toDate,    
  } = useContext(DataProvider);

  const customStyles = {           
    option: (base, state) => ({
      ...base,      
      color: "#1e2022",
      backgroundColor: state.isSelected ? "rgba(189,197,209,.3)" : "white",
      padding: ".5rem 3rem .5rem .5rem",
      cursor: "pointer",
    }),       
    singleValue: (provided, state) => {
      const opacity = state.isDisabled ? 0.5 : 1;
      const transition = "opacity 300ms";

      return { ...provided, opacity, transition };
    },
  };

  const options = [
    {
      value: [
        moment(fromDate).subtract(1, "days"),
        moment(toDate).subtract(1, "days"),
      ],
      label: "Previous Day",
    },
    {
      value: [
        moment(fromDate).subtract(7, "days"),
        moment(toDate).subtract(7, "days"),
      ],
      label: "Previous Week",
    },
  ];

  const handleApply = (event) => {
    setSelectedValue(event);
  };

  return (
    <Select
      onChange={handleApply}
      options={options}
      styles={customStyles}
      placeholder="Compare to Past"
    />
  );
}

Answer 1

为了仅更改所选选项的背景颜色，请尝试以下操作：

option: (provided, state) => ({
    ...provided,
    backgroundColor: state.isSelected ? "rgba(189,197,209,.3)" : "white",
}),

Answer 2

关于这一点有一个问题。显然 isSelected 仅提供用于多选。对于单选，您可以检查：

state.data === state.selectProps.value

https://github.com/JedWatson/react-select/issues/3817

[编辑] 这看起来真的很奇怪，但如果你在组件之外声明选项，它就会起作用。检查这里。如果您复制渲染函数中的选项，则样式将不起作用。当我尝试将值设置为“1”和“2”时，值是日期或时刻对象或其他东西不是问题。

[编辑 2] 好的 emm.. 我将其重构为一个功能组件，并且它与组件内部的选项一起使用。我猜这可能是使用钩子的问题。可以查看相同的沙箱。