如何在 v2 中减小 React Select 的大小

Question

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

Answer 1

下面的答案是在 react-select v2 处于测试阶段时给出的，此后发生了很大变化。

阅读 react-select 文档 HERE

React-Select v2 使用 emotion CSS-in-JS，因此控制 select 组件和子组件样式的新方法是将样式对象传递给styles 道具。您还可以将类名设置为使用外部样式表设置样式。

CSS-in-JS 方式

const customControlStyles = base => ({
    height: 20,
    minHeight: 20
});

<Select ... styles={{control: customControlStyles}} ... />

CSS 方式 `<Select ... className="myClassName" ... />`

.myClassName__control {
    height: 20px;
    min-height: 20px;
}

Answer 2

尝试为 maxMenuHeight 属性传递一个值：

<Select
  maxMenuHeight={190}
/>

见documentation

Answer 3

您还可以尝试为 react-select 组件的输入字段设置样式，因为它会影响整个 react-select 组件的高度。就我而言，这是由于来自 materializecss 的干扰而发生的。

const customStyles = {
  input: styles => {
    return {
      ...styles,
      height: '1.8em'
  };
}
const App = () => (
  <Select
    styles={customStyles}
    options={...}
  />
);

Answer 4

设置 height 属性看起来它会保留该高度，即使您有溢出（从多个选定值溢出到下一行）所以您最终的值落在框外.

我通过在 dropdownIndicator 和 clearIndicator 上设置填充顶部和底部并在 control 上设置 minHeight 解决了这个问题，如下所示：

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

<Select styles={styles}/>

Answer 5

加上@craigmichaelmartin 的评论，control 上的 minHeight 很重要，需要覆盖，需要在很多地方设置才能真正克服它。
这是我让它匹配 36px 文本输入元素的高度的方法（当然，这些设置也适用于 css）

const customStyles = {
  container: (provided) => ({
    ...provided,
    display: 'inline-block',
    width: '250px',
    minHeight: '1px',
    textAlign: 'left',
    border: 'none',
  }),
  control: (provided) => ({
    ...provided,
    border: '2px solid #757575',
    borderRadius: '0',
    minHeight: '1px',
    height: '42px',
  }),
  input: (provided) => ({
    ...provided,
    minHeight: '1px',
  }),
  dropdownIndicator: (provided) => ({
    ...provided,
    minHeight: '1px',
    paddingTop: '0',
    paddingBottom: '0',
    color: '#757575',
  }),
  indicatorSeparator: (provided) => ({
    ...provided,
    minHeight: '1px',
    height: '24px',
  }),
  clearIndicator: (provided) => ({
    ...provided,
    minHeight: '1px',
  }),
  valueContainer: (provided) => ({
    ...provided,
    minHeight: '1px',
    height: '40px',
    paddingTop: '0',
    paddingBottom: '0',
  }),
  singleValue: (provided) => ({
    ...provided,
    minHeight: '1px',
    paddingBottom: '2px',
  }),
};

Answer 6

另一种CSS方式

您还可以指定 classNamePrefix 并用它来覆盖 CSS 样式。

<Select classNamePrefix="mySelect" />

.mySelect__value-container{
 height: 35px;
}

Answer 7

来自同样在 SO 上，您可以修改 react-select 主题以更改控件的高度。对我来说似乎比其他答案更容易。

const customThemeFn = (theme) => ({ 
  ...theme,
  spacing: {
    ...theme.spacing,
    controlHeight: 30,
    baseUnit: 2
  }
})

<Select theme={customThemeFn}> ... </Select>

有关更多信息，请参阅 this page of the docs 中的 Theme modifier method。

如何在 v2 中减小 React Select 的大小

How to reduce the size of React Select in v2

react-select

阅读 react-select 文档 HERE

CSS-in-JS 方式

CSS 方式 <Select ... className="myClassName" ... />

另一种CSS方式

CSS 方式 `<Select ... className="myClassName" ... />`