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