css - 如何设置 react 选择选项的样式

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}
/>

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

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

Answer 1

react 选择 v2(更新)

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

自定义样式

Style individual components with custom css using the styles prop.

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(旧答案 - 已弃用)

Custom classNames

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

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

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

MenuRender

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

optionClassName String The className that gets used for options

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