如何去除indicatorContainer的padding（IndicatorsContainer的first child）？

Question

我正在尝试缩小 react-select 的 Select 组件的大小。除了一个例外，一切都很好。

我希望删除其填充的元素具有此 class: css-tlfecz-indicatorContainer 并且是 react-select Select 组件的子组件，更准确地说，负责的子组件渲染 × 符号以清除选择。

我试过把它放在 Select 的 styles 属性中：

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

但是没有用。我希望有一个 indicatorContainer 样式组件，这样我就不必用我自己的组件覆盖组件，但我认为这是唯一的方法。

如果我从 DevTools 的“元素”选项卡手动更改样式，Select 的屏幕截图：

没有错误消息。

谢谢。

Answer 1

在问题的片段中，我只需将 indicatorsContainer 替换为 clearIndicator。这个 clearIndicator 不是像 clearIndicator 那样用 class 渲染的，而是用 indicatorContainer 渲染的（在 indicator 之后没有 s），这让我很困惑。

Answer 2

您需要设置样式 dropdownIndicator 和 clearIndicator 而不是 indicatorContainer。

如何去除indicatorContainer的padding（IndicatorsContainer的first child）？

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

javascript

reactjs

react-select