How to style react-select options

Question

What's the best way to style a react-select component's (https://github.com/JedWatson/react-select) options?

I can target the select itself just fine, with something like:

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

The problem is, the actual options when the select is expanded remain styled as the default. How can I target these options for styling?

Here is an example of what I'm talking about. I can style the placeholder, but not the options:

Answer 1

react select v2 (update)

This new version introduces a new styles-api and some other major changes.

Custom Styles

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

Now there is better documentation and more clear examples on the project's website:

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 )

Custom classNames

You can provide a custom className prop to the component, which will be added to the base .Select className for the outer container. The built-in Options renderer also support custom classNames.

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

MenuRender

The menuRenderer property can be used to override the default drop-down list of options.

optionClassName String The className that gets used for options

Example: react-select/master/src/utils/defaultMenuRenderer.js