如何设置反应选择选项的样式

Question

设置 react-select 组件（ https://github.com/JedWatson/react-select ）选项的最佳方式是什么？

我可以很好地定位选择本身，例如：

 ...
import Select from 'react-select'
...
const styles = {
  fontSize: 14,
  color: 'blue',
}
<Select
    options={[1,2,3,4]}
    placeholder={'Select something'}
    clearable={false}
    style={styles.select}
/>

问题是，展开选择时的实际选项仍保持默认样式。如何定位这些样式选项？

这是我正在谈论的一个例子。我可以设置占位符的样式，但不能设置选项：

原文由 tomtom 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

反应选择 v2（更新）

这个新版本引入了新的 styles-api 和其他一些重大变化。

自定义样式

使用 styles 属性使用自定义 css 为单个组件设置样式。

 const colourStyles = {
  control: styles => ({ ...styles, backgroundColor: 'white' }),
  option: (styles, { data, isDisabled, isFocused, isSelected }) => {
    const color = chroma(data.color);
    return {
      ...styles,
      backgroundColor: isDisabled ? 'red' : blue,
      color: '#FFF',
      cursor: isDisabled ? 'not-allowed' : 'default',
      ...
    };
  },
  ...
};

export default () => (
  <Select
    defaultValue={items[0]}
    label="Single select"
    options={items}
    styles={colourStyles}
  />
);

现在项目网站上有更好的文档和更清晰的示例：

https://react-select.com/upgrade-guide#new-styles-api

https://react-select.com/home#custom-styles

https://react-select.com/styles#styles

react-select v1（旧答案 - 已弃用）

自定义类名

您可以为组件提供自定义 className 属性，该属性将添加到基础 .Select 外部容器的 className 中。内置的选项渲染器也支持自定义类名。

将您的自定义 className 作为属性添加到选项数组中的对象：

 const options = [
    {label: "one", value: 1, className: 'custom-class'},
    {label: "two", value: 2, className: 'awesome-class'}
    // more options...
];
...
<Select options={options} />

菜单渲染

menuRenderer 属性可用于覆盖默认的选项下拉列表。

optionClassName String 用于选项的类名

示例： react-select/master/src/utils/defaultMenuRenderer.js

原文由 btzr 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

@btzr 的回答是正确的，并且样式 react-select 使用 CSS 类（相对）容易。

但是，很难设置菜单项的样式，因为每次打开菜单并尝试检查项目时，菜单都会再次关闭。

有帮助的是（暂时）指定 menuIsOpen={true} 参数，这将使菜单保持打开状态以便于检查。

原文由 johndodo 发布，翻译遵循 CC BY-SA 4.0 许可协议