How to remove the padding of the indicatorContainer (first child of IndicatorsContainer)?

user_258462 0
Viewed 937

I am trying to make the size of the react-select's Select component smaller. Everything works pretty well with one exception.

The element whose padding I wish to remove has this class: css-tlfecz-indicatorContainer and is a subcomponent of the react-select Select component, more precisely, the subcomponent responsible of rendering the × sign for clearing the selection.

I have tried putting this in the styles prop of the Select:

indicatorsContainer: (provided, state) => {
  return {
    ...provided,
    padding: '0px',
    paddingLeft: '0px',
    paddingTop: '0px',
    paddingRight: '0px',
    paddingDown: '0px',
  };
},

But it does not work. I expected that there was an indicatorContainer styleable component, so that I do not have to override components with my own components, but I think this is the only way.

A screenshot of how the Select looks like if I change the styles manually from the DevTools' Elements tab:

screenshot

There are no error messages.

Thank you.

react-select reactjs javascript
2 Answers

In the snippet in the question I just had to replace indicatorsContainer with clearIndicator. This clearIndicator is not rendered with a class like clearIndicator but with indicatorContainer (without s after indicator) and this confused me.

user_2584620

You'll need to style dropdownIndicator and clearIndicator instead of indicatorContainer.

user_143233860
Related