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

Question

我正在为我的下拉菜单 select 离子使用 React select 组件。所有功能都运行良好，但当从下拉列表中选择 selected 选项时，我无法设置 selected 选项背景颜色的样式。尝试了几个选项，但那也不起作用。

下面是相同的代码:-

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

有一个关于此的问题。显然isSelected只提供给multi-select。对于单select，您可以检查：

state.data === state.selectProps.value

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

[编辑] 这看起来真的很奇怪，但似乎如果您在组件外部声明选项，它就可以工作。检查 here。如果您在渲染函数中复制了选项，那么样式将不起作用。当我尝试将值设置为“1”和“2”时，值是 Dates 或 moment 对象或其他东西不是问题。

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

Answer 2

您可以改用 hasValue 属性

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

backgroundColor: state.hasValue ? "rgba(189,197,209,.3)" : "white",

Answer 3

要仅更改所选选项的背景颜色，试试这个：

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

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

Unable to change selected option background color | React Select

javascript

select

reactjs

react-select