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

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