16

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?

Jane Fred
  • 1,379
  • 7
  • 23
  • 47

3 Answers3

16

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

Tim Gerhard
  • 3,477
  • 2
  • 19
  • 40
6

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

Max
  • 469
  • 4
  • 7
  • Why you have used height:100vh in .react-select__menu? – Sunil R. Aug 29 '19 at 12:03
  • If I do my CSS as you said does it automatically the react-select or shall I specify the className in the ` – Jane Fred Aug 29 '19 at 12:03
  • yes, give like the example says, give it: className='react-select-container' and classNamePrefix="react-select" – Max Aug 29 '19 at 12:04
2

As per the react-select official docs, there is a two ways to edit the styles by class names.

1. Static, by setting the classNamePrefix and overriding the componen class names in your own less or css file:

Styles in your less file:

.react-select-container {
  .react-select__menu-list {
    background-color: #4ca6f1;
  }
}

React component:

<Select
  {...props}
  className="react-select-container"
  classNamePrefix="react-select"
/>

HTML output:

<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>

2. Dynamically, by setting classnames using prop classNames:

React component:

<Select
  classNames={{
    control: (state) => state.isFocused ? 'border-red-600' : 'border-grey-300',
  }}
/>
technik
  • 1,009
  • 11
  • 17