javascript - How to remove the padding of the indicatorContainer (first child of IndicatorsContainer)? - Stack Overflow

admin管理员组

文章数量:1331707

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

Share Improve this question Follow asked Sep 2, 2020 at 9:36 silviubogansilviubogan 3,46133 gold badges3737 silver badges6767 bronze badges 1

• @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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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.

本文标签：