react-select - 如何在 v2 中减小 React Select 的大小

Question

新的 v2 react-select 控件很棒，但默认情况下太大了。是否有一种(最好)简单的方法可以将高度降低到与标准选择控件相同的高度(使用 Bootstrap v3)？

Answer 1

设置height即使您有溢出(从多个选定的值溢出到下一行)，属性看起来也保留了该高度，因此您最终得到的值落在框外。

我通过在 dropdownIndicator 上设置填充顶部和底部解决了这个问题和 clearIndicator和设置minHeight在 control像这样:

const styles = {
  control: (base) => ({
    ...base,
    minHeight: 32,
  }),
  dropdownIndicator: (base) => ({
    ...base,
    paddingTop: 0,
    paddingBottom: 0,
  }),
  clearIndicator: (base) => ({
    ...base,
    paddingTop: 0,
    paddingBottom: 0,
  }),
};

<Select styles={styles}/>