Reactjs 如何设置react Select 选项的样式

发布于07月25日

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

我可以很好地针对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}
/>

问题是，展开select时的实际选项仍保持默认样式.如何针对这些样式选项？

这是我所说的一个例子.我可以设置占位符的样式，但不能设置选项:

react select v2 (update)

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

自定义样式

使用stylesprops 使用自定义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 ( old answer - deprecated )

自定义类名

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

Add your custom className as a property to objects in the options array:

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