在 isDisabled 时更改背景颜色基 React-select

Question

在这种情况下，我将在

时更改 select 字段的颜色基础

isDisabled={true}

改成另一种颜色。

>     import React from "react";
>     import Select from "react-select";
>     
>     const colourOptions = [
>       { value: "red", label: "Red" },
>       { value: "green", label: "Green" },
>       { value: "blue", label: "Blue" }
>     ];
>     
>     const colourStyles = {
>       option: (styles, { data, isDisabled, isFocused, isSelected }) => {
>         // const color = chroma(data.color);
>         console.log({ data, isDisabled, isFocused, isSelected });
>         return {
>           ...styles,
>           backgroundColor: isFocused ? "#999999" : null,
>           color: "#333333"
>         };
>       }
>     };
>     
>     export default () => (
>       <Select
>         defaultValue={colourOptions[1]}
>         label="Single select"
>         options={colourOptions}
>         styles={colourStyles}
>         isDisabled={true}
>       />
>     );

我的期望是，select-字段的基色可以更改为另一种颜色。

Answer 1

已解决

<Select
    defaultValue={flavourOptions[2]}
    options={flavourOptions}
    theme={(theme) => ({
      ...theme,
      borderRadius: 0,
      colors: {
        ...theme.colors,
        primary25: 'hotpink',
        primary: 'black',
      },
    })}
  />

primary25 是 isDisable = true 时的条件。您可以在 react-select documentation（覆盖主题）

中找到它

在 isDisabled 时更改背景颜色基 React-select

Change Background Color base React-select when its isDisabled

javascript

reactjs

react-select