Как изменить стили выбора опций при выборе

Question

Я использую реагирующее-выбранное последнее для создания асинхронного c выбора компонента. Я пытаюсь изменить цвет фона и границы выделенного, как только я выбираю какое-то значение. Я просмотрел документ и попытался использовать state.isSelected для условного изменения цвета фона. Но не поможет.

Когда значение выбрано, как показано ниже, я хотел бы изменить цвет фона, а также цвет границы. Но ничего не происходит. Буду признателен за помощь

Answer 1

Метод

См. Документ: Reaction-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;