How to style react-select options

tomtom picture tomtom · Jul 25, 2017 · Viewed 100.2k times · Source

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: enter image description here

Answer

johndodo picture johndodo · Oct 26, 2018

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