How can I remove the bar in the react-select?

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.


react-select allows us to control components by doing

components={{
  IndicatorSeparator: () => null
}}

For example:

<Select
  id="search-commodity"
  options={comodityOptions}
  components={{
    IndicatorSeparator: () => null
  }}
/>