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.

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

@btzr's answer is correct, and styling react-select using CSS classes is (relatively) easy.

However, it is difficult to style menu items because every time you open the menu and try to inspect the items, the menu closes again.

What helps is to (temporarily) specify menuIsOpen={true} parameter, which will keep menu open for easier inspection.

const CustomStyle = {  option: (base, state) => ({    ...base,    backgroundColor: state.isSelected ? {Color1} : {Color2},  })}<Select styles={customStyle} >

There are more options for this. Have a look at the documentation for styling.

https://react-select.com/styles