如何更改 React-Select 组件的颜色

Question

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

https://codesandbox.io/s/ly87zo23kl

- Snoopy

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',
      },
    })}
  />

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

- Laura

---

在 React v3 中，样式组件的命名有些令人困惑：neutral0 设置背景，primary25 设置高亮，neutral80 设置选中文本颜色。非选中文本颜色可以通过在父元素上设置 color: '#ffffff' 来实现。 - Student

我想补充一点，覆盖的颜色必须具有像示例中那样已知的浏览器名称，十六进制颜色不起作用（至少在我的情况下，十六进制不起作用:( )。 - Mariana Marica

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',
    })
  }}
/>

- Rahul Dasgupta