styling react-select using classes

Question

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 1

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:

Answer 2

See their example:

For example, given className='react-select-container' and classNamePrefix="react-select", the DOM structure is similar to this:

<div class="react-select-container">
  <div class="react-select__control">
    <div class="react-select__value-container">...</div>
    <div class="react-select__indicators">...</div>
  </div>
  <div class="react-select__menu">
    <div class="react-select__menu-list">
      <div class="react-select__option">...</div>
    </div>
  </div>
</div>

So in your css, simply do:

.react-select-container {
  background-color: 'red';
}

.react-select__menu {
  height: 100vh;
}

etc