javascript - 选择时如何更改反应选择选项样式

Question

我正在使用 react-select latest 创建一个异步选择组件。一旦我选择了一些值，我正在尝试更改选择的背景颜色和边框颜色。我浏览了文档并尝试使用state.isSelected有条件地更改背景颜色。但没有帮助。

当值如下选择时，我想更改背景颜色以及边框颜色。但似乎什么也没有发生。帮助将不胜感激

标签： javascripthtmlcssreactjsreact-select

Answer 1

方法

参考文档：react-select自定义样式

您可以覆盖不同域中默认提供的样式。

在这种情况下，基本控制就足够了。

const customStyles = stateValue => ({
  control: (provided, state) => ({
    ...provided,
    backgroundColor: stateValue ? "gray" : "white"
  })
});

---

演示

---

资源

import React, { useState } from "react";
import Select from "react-select";

const options = [
  { value: "chocolate", label: "Chocolate" },
  { value: "strawberry", label: "Strawberry" },
  { value: "vanilla", label: "Vanilla" }
];

const customStyles = value => ({
  control: (provided, state) => ({
    ...provided,
    alignItems: "baseline",
    backgroundColor: value ? "gray" : "white"
  })
});

const App = () => {
  const [selected, setSelected] = useState("");
  const onChange = e => {
    setSelected(e.value);
  };
  const onClickButton = () => {
    setSelected("");
  };
  const displayItem = selected => {
    const item = options.find(x => x.value === selected);
    return item ? item : { value: "", label: "" };
  };
  return (
    <>
      <Select
        options={options}
        styles={customStyles(selected)}
        onChange={onChange}
        value={displayItem(selected)}
      />
      <button onClick={onClickButton}> Clear Selection </button>
    </>
  );
};

export default App;