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,

Answer 1

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

Answer 2

This is how you override the theme styles:

import React from "react";
import Select from "react-select";

class SelectComponent extends React.Component {
  componentDidMount() {}
  render() {
    const { data } = this.props;

    const options = [
      { value: "21", label: "21%" },
      { value: "9", label: "9%" },
      { value: "0", label: "0%" }
    ];

    const theme = theme => ({
      ...theme,
      colors: {
        ...theme.colors,
        primary25: "#f3f3f3",
        primary: "pink"

        // All possible overrides
        // primary: '#2684FF',
        // primary75: '#4C9AFF',
        // primary50: '#B2D4FF',
        // primary25: '#DEEBFF',

        // danger: '#DE350B',
        // dangerLight: '#FFBDAD',

        // neutral0: 'hsl(0, 0%, 100%)',
        // neutral5: 'hsl(0, 0%, 95%)',
        // neutral10: 'hsl(0, 0%, 90%)',
        // neutral20: 'hsl(0, 0%, 80%)',
        // neutral30: 'hsl(0, 0%, 70%)',
        // neutral40: 'hsl(0, 0%, 60%)',
        // neutral50: 'hsl(0, 0%, 50%)',
        // neutral60: 'hsl(0, 0%, 40%)',
        // neutral70: 'hsl(0, 0%, 30%)',
        // neutral80: 'hsl(0, 0%, 20%)',
        // neutral90: 'hsl(0, 0%, 10%)',
      }
      // Other options you can use
      // borderRadius: 4
      // baseUnit: 4,
      // controlHeight: 38
      // menuGutter: baseUnit * 2
    });

    return (
      <Select
        className="select"
        defaultValue={options[0]}
        options={options}
        theme={theme}
      />
    );
  }
}

export default SelectComponent;

Answer 3

Accepted answer by btzr is correct and let's us style the elements with styles passed as props in React.

I still prefer using Sass or Less when I style my elements because I have a lot of theming in those files. That's why I pass a classNamePrefix='filter' instead.

<Select
  classNamePrefix='filter'
  options={this.getOptions()}
  onChange={this.handleFilterChange}
  isMulti
  menuIsOpen
/>

And then style the elements in Sass or Less on that class name filter.

.filter {
  &__menu {
    margin: 0.125rem auto;
  }

  &__option {
    background-color: white;

    &--is-focused {
      background-color: lightblue;
    }
  }

  &__group {
    padding: 0;
  }
}

Answer 4

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

Answer 5

I got use style:

const options = [
    {label: "one", value: 1, style: { color: 'red' }},
    {label: "two", value: 2, style: { color: 'blue' }}
    // more options...
];
...
<Select options={options} />

Answer 6

@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.