In this article, I will cover a few things I have learned about styling react-select. Hopefully, it will save you some time and will make your experience better when working with react-select options.

React select is great instrument for various cases: simple dropdown(using Select component and isSearchable={false}), searchable dropdown using AsyncCreatable. It is well worth taking time to study all its possibilities.

In this article, I will cover a few most important things that helped me a lot and took me most of the time. Here is a brief overview:

1. Styling element by using styles prop

2. Finding the right component to style

3. Learn how to keep dropdown open when styling in inspector react-select

4. Adding on hover state

Most of the things can be easily found by googling actually.

I made the most basic example using create react app.

In the App.js

Styling elements by using styles prop.

react-select is styled by passing styles prop.

For styles prop we pass an object which properties are names of components from which react select is made of(more about it soon). Each property

is a function that takes 2 arguments: provided and state.

If you have not understood anything from above it is OK:) it will be more clear on example.

I have made empty object customStyles and added it as props

Most likely in real life, you will want to have a separate file with customStyles object since there will be a lot of styles in there. For the sake of simplicity, I made the most simple basic example.

control and dropdownIndicator are names of react-select components.

argument provided is … well provided by react-select default CSS styles:).

Let’s see what react-select will pass to the provided argument when it will call control method.

Let’s open browser console and check it:

style-react-select-console-output
what react-select pass to provided of control

So a bunch of styles – default styles of `control` component. So if we want default styles and after our own, we spread provided object.

Finding the right component to style

Let’s imagine our goal is to get rid of dropdown indicator(in case if you will want to make a simple dropdown button) and according to your design react-select should have border-radius 0.

React-select is made from a big number of components, about 25. List of components from the documentation can be found here:
https://react-select.com/components

One of the tricks is to find the right component to style. Here is how I think is to inspect CSS and find corresponding components for which we have to set up styles.
Normally I did this in the following way: in inspector found and the element I wanted to change CSS for. For example:

style-react-select-inspect-html
Inspect HTML code in Chrome Dev Tools of element you want to style

React select “inside” is styled using styled-components, so in the inspector, we will not see the name of the component exactly, though you can get a “hint” like “control” in this case, though I am not sure it is always a case.

We need to find the right component that stands for class=”css-o3h76h-control”. That can be done by first inspecting element in Chrome dev tools. And after I would click React tab(for which you have to install React Developers Tool. If you have not installed it before https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en )

And there you will see the component we need to style. In this particular case, most likely you will want to style Control component.

style-react-select-inspect-react-dev-tools
Inspect HTML code in Chrome React Dev Tools of element we have chosen before

So now to Control component you can add borderRadius: 0 to remove border radius

And after we can repeat the same procedure for finding right component to remowe dropdown indicator. Right component will be dropdownIndicator and we will need to add to it next style: display: "none"

So after this changes to customStyles object, our code will look like this:

Be careful components are called Pascal case in the documentation and in React dev tools, however, when writing styles for them they will be camel case. So, for example to style component MenuList, you will have to write styles for menuList:

menuList: provided => ({
    ...provided,
    paddingBottom: 21
})

Learn how to keep dropdown open when styling in inspector react-select

Another aspect you will meet is to inspect dropdown.

In order to not to close the dropdown so you can inspect it in chrome dev tool you can pass to Select menuIsOpen prop and set it to true
<Select options={options} styles={customStyles} menuIsOpen={true} />

This will open the dropdown and will enable to inspect everything you might need there.

Adding on hover state

To add on hover CSS rules add it like this to needed Component:

'&:hover': {
    borderColor: 'red'
}

Simple as that.

Feel free to write some comments whether article was helpful for you.