I am trying to make the size of the react-select's Select ponent 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 subponent of the react-select Select ponent, more precisely, the subponent 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 ponent, so that I do not have to override ponents with my own ponents, 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:

There are no error messages.

Thank you.

I am trying to make the size of the react-select's Select ponent 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 subponent of the react-select Select ponent, more precisely, the subponent 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 ponent, so that I do not have to override ponents with my own ponents, 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:

There are no error messages.

Thank you.

• javascript
• reactjs
• react-select

• @RokoC.Buljan The height of the Select should match the height of the toolbar in which it is placed. – silviubogan Commented Sep 2, 2020 at 9:37

2 Answers 2

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

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.