如何更改反应选择颜色

Question

我不确定如何将颜色从默认的蓝色更改为其他颜色。示例代码位于下面的codesandbox 链接中。我尝试更改 root 的样式，但没有成功。

https://codesandbox.io/s/ly87zo23kl

Answer 1

react-select

2.1.0版本添加了覆盖主题的选项。

以下是其工作原理的示例：

<Select
    defaultValue={flavourOptions[0]}
    label="Single select"
    options={flavourOptions}
    theme={(theme) => ({
      ...theme,
      borderRadius: 0,
      colors: {
      ...theme.colors,
        text: 'orangered',
        primary25: 'hotpink',
        primary: 'black',
      },
    })}
  />

您可以在这里找到完整的文档和实例，以及这里可以覆盖的不同变量。

Answer 2

测试于

react-select v5.7.4

更改下拉菜单的背景颜色：

<Select
  styles={{
    control: (provided, state) => ({
      ...provided,
      boxShadow: "none",
      border: "none",
      backgroundColor: "red",
      color: "#000000",
      width:"100%"
    })
  }}
/>

对于更改下拉选项的背景颜色：

<Select
  styles={{
    control: (provided, state) => ({
      ...provided,
      boxShadow: "none",
      border: "none",
      backgroundColor: "red",
      color: "#000000",
      width:"100%"
    }),
    option: (provided, state) => ({
      ...provided,
      backgroundColor: state.isSelected ? '#00AEEC' : 'inherit',
    })
  }}
/>

Answer 3

我会找到一个好的、完整的答案，所以我开始查看 React-select 的代码，我发现了这个：

   <Select
    options={options}
    menuPortalTarget={document.body}
    menuPosition="fixed"
    theme={(theme) => ({
      ...theme,
      borderRadius: 10,
      colors: {
        ...theme.colors,
        //after select dropdown option
        primary50: "gray",
        //Border and Background dropdown color
        primary: "#CAFFFA",
        //Background hover dropdown color
        primary25: "gray",
        //Background color
        neutral0: "black",
        //Border before select
        neutral20: "#CAFFCA",
        //Hover border
        neutral30: "#82FFE7",
        //No options color
        neutral40: "#CAFFCA",
        //Select color
        neutral50: "#F4FFFD",
        //arrow icon when click select
        neutral60: "#42FFDD",
        //Text color
        neutral80: "#F4FFFD",
      },
    })}

我知道这个答案已经过时了，但我希望对任何人都有帮助。