styling react-select using classes

css reactjs react-select classname
Jane Fred picture Jane Fred · Aug 29, 2019 · Viewed 9.4k times · Source

I am using react-select in my code. https://www.npmjs.com/package/react-select

I want to style my drop down using classNames, so that I referred https://react-select.com/styles. The DOM structure of react slect is shown in the link.

How can I style the react-select using classNames?

Can anyone show a sample code?

Answer

Tim Gerhard picture Tim Gerhard · Aug 29, 2019

According to the documentation

If you provide the className prop to react-select, the SelectContainer will be given a className based on the provided value.

So it should work like this:

<Select className="abc" .... />

Then you can use your classname as usual.

.abc {
color: red;
}

You can also use classNamePrefix

by specifing a classNamePrefix, react-select will render all classNames with your prefix. If you use this:

<Select className="abc" classNamePrefix="react-select" ... />

Your Select will automatically render a class structure like this: enter image description here

Related questions

How to style react-select options

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 …

Read More
React-Select Remove focus border

i cant figure out how do i remove border or outline ( not sure which one it is ) from react select, when its focused. Uploaded image for reference. I have no border by default. customStyle = { control: provided => ({ ...provided, height: 10, width: 300, …

Read More
Styling ReactSelect with CSS-in-JS

Here is a link to another good stackoverflow post that I am basing my initial answer on. I am attempting to style my ReactSelect component so that it looks something like this: It's not obvious from the screenshot above, but …

Read More