score:77

Accepted answer

We can remove the dropdown indicator by including DropdownIndicator: () => null in components property.

Update:As @shlgug and @nickornotto suggested remove separator by including IndicatorSeparator:() => null

<Select
   components={{ DropdownIndicator:() => null, IndicatorSeparator:() => null }}
 />

score:1

EDIT: This is for an older version.

Styling react-select is doable but you need to jump through a few hoops.

You have some auto-generated elements you can target to style - https://react-select.com/styles#style-object

In order to find what the style-key is for the element you want to target is look at this - https://github.com/JedWatson/react-select/issues/3135#issuecomment-432557568

^ You need to add a className and classNamePrefix to the Component to see what it actually is. Their docs could do with some work but I see a big backlog of issues and PRs on the repo so I think the odds are slim that that will happen soon.

Then you can style that key as described - https://react-select.com/styles#provided-styles-and-state

score:1

Use styles={customStyles}, where:

// Here are right side idicators X and \/ . We can use each one separate or the hole Indicator Container!
    // clearIndicator: (prevStyle, state) => state.isMulti ? ({
    //     ...prevStyle,
    //     display: 'none'
    // }) : null,
    // dropdownIndicator: (prevStyle, state) => state.isMulti ? ({
    //     ...prevStyle,
    //     display: 'none'
    // }) : null,
    indicatorsContainer: (prevStyle, state) => state.isMulti ? ({
        ...prevStyle,
        display: 'none'
    }) : null,
}

Additional check for state.isMulti set them to none or not. If you don't need additional check, just remove ternary operator state.isMulti and : null

score:42

To expand on rajesh kumar's answer, you can remove the dropdown indicator and the indicator separator (the horizontal line between the selection text and the dropdown arrow) using the following:

<Select
    components={{ DropdownIndicator:() => null, IndicatorSeparator:() => null }}
/>

Related Query

More Query from same tag