REACT-SELECT 如果选择了一个选项（或仅文本本身），则为我的单元格背景着色？

Question

如果做出选择，我想填充我的保管箱单元格的背景。例如品味：Good，以及评论：3/4，它必须是 match.json 中的默认值。如果是 Good ，单元格的背景应该是绿色的。 3/4 单元格应该是黄色的。（比照图片）

对于 Availability，如果 availability 为 1，则只有已经为蓝色的复选框，否则不填写蓝色。

import React from "react";
import Select from "react-select";

显示：

export default function Display() {
 ...
  const styles = {
    select: {
      width: "100%",
      maxWidth: 150
    }
  };
  const TASTE = [
    { label: "Good", value: "Good" },
    { label: "Medium", value: "Medium" },
    { label: "Bad", value: "Bad" }
  ];
...   

  return (
    <>
        <div className="TextStyle">
          {"Taste "}
          <CustomDropdown
            style={styles.select}
            options={TASTE}
            defaultValue={TASTE.find((t) => t.label === 
              item.taste)}
          />
        </div>
        ...
    </>
  );
}

Answer 1

在 Select 组件中，您可以使用一个名为 styles 的道具，您实际上可以在其中创建一个逻辑来根据 select 显示不同的颜色你做的离子。例如：如果你只想在 select 好时背景颜色为绿色，那么你可以创建一个这样的对象：

const colourStyles = {
  singleValue: (provided, { data }) => ({
    ...provided,
    backgroundColor: data.value === "Good" ? "green" : "",
  }),
};

然后将对象 colourStyles 作为 prop:

传递给 CustomDropDown

<CustomDropdown
 style={styles.select}
 options={TASTE}
 defaultValue={TASTE.find(t => t.label === item.taste)}
 styleSelect={colourStyles}
/>

最后在 CustomDropdown 组件中将 styleSelect 像这样传递给 Select 组件（记得添加我创建的新道具CustomDropdown 组件中的一个参数):

<Select 
 options={options} 
 defaultValue={defaultValue}
 styles={styleSelect}
/>

然后您可以对其他 CustomDropDown 组件执行相同的操作。

REACT-SELECT 如果选择了一个选项（或仅文本本身），则为我的单元格背景着色？

REACT-SELECT Color the background of my cell if a choice is selected (or just the text itself)?

javascript

css

reactjs

react-select

react-hooks