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?
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;
}
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:
classNames prop which can be used to change class names of each and every element inside the dropdown. Do check the github code to know the exact property keys to use.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
<Select> tag? @Max
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',
}}
/>
