How can I remove the bar in the react-select?
13,317
Solution 1
react-select allows us to control components by doing
components={{
IndicatorSeparator: () => null
}}
For example:
<Select
id="search-commodity"
options={comodityOptions}
components={{
IndicatorSeparator: () => null
}}
/>
Solution 2
The component you are looking to style is indicatorSeparator
. For instance, add this to your styles:
indicatorSeparator: (styles) => ({display:'none'})
How did I find this out? I added classNamePrefix to the react-select properties and then used the inspector to see what the class name of the element was.
Related videos on Youtube
Author by
Lusha Li
Updated on June 04, 2022Comments
-
Lusha Li almost 2 years
I am trying to improve my UI for the react-select. I did some researches online, but I still cannot figure out how to remove the bar in the select.
Can I style the control component to remove the bar? How?
import React from 'react'; import chroma from 'chroma-js'; import { colourOptions } from './docs/data'; import Select from 'react-select'; const dot = (color = '#ccc') => ({ alignItems: 'center', display: 'flex', ':before': { backgroundColor: color, borderRadius: 10, content: ' ', display: 'block', marginRight: 8, height: 10, width: 10, }, }); const colourStyles = { control: styles => ({ ...styles, backgroundColor: 'white' }), option: (styles, { data, isDisabled, isFocused, isSelected }) => { const color = chroma(data.color); return { ...styles, backgroundColor: isDisabled ? null : isSelected ? data.color : isFocused ? color.alpha(0.1).css() : null, color: isDisabled ? '#ccc' : isSelected ? chroma.contrast(color, 'white') > 2 ? 'white' : 'black' : data.color, cursor: isDisabled ? 'not-allowed' : 'default', }; }, input: styles => ({ ...styles, ...dot() }), placeholder: styles => ({ ...styles, ...dot() }), singleValue: (styles, { data }) => ({ ...styles, ...dot(data.color) }), }; export default () => ( <Select defaultValue={colourOptions[2]} label="Single select" options={colourOptions} styles={colourStyles} /> );
-
Garrett Motzner over 5 yearsCould you clarify what you mean by "bar"?
-
Lusha Li over 5 yearsIt's the bar between the input and the dropdown arrow. Thanks~
-
Lusha Li over 5 yearsIf you look into the CodeSandbox, it will be easy to see what the bar is.
-
Garrett Motzner over 5 yearsI was thinking scroll bar :)
-
-
cisco over 3 yearsLove that you added your process 👏🏽