Question

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

Answer 1

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

更多/更好的信息HERE

CSS-in-JS方式

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

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

CSS Way

<Select ... className="myClassName" ... />

.myClassName__control {
    height: 50px;
}

Answer 2

除了添加@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 3

尝试传入maxMenuHeight道具的值：

<Select
  maxMenuHeight={190}
/>

请参阅documentation

Answer 4

设置AGGR=df.groupby(['month','company'])['score'].apply(lambda x: pd.value_counts(x)/x.count())属性看起来即使在溢出时（从多个选定值溢出到下一行）也将保留该高度，因此最终值将落在框外。

我通过在height和dropdownIndicator上设置填充顶部和底部并在clearIndicator上设置minHeight来解决了这个问题，

control

Answer 5

另一种CSS方式

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

<Select classNamePrefix="mySelect" />

.mySelect__value-container{
 height: 35px;
}

Answer 6

您还可以尝试设置反应选择组件的输入字段的样式，因为它会影响整个反应选择组件的高度。就我而言，这是由于物化的干扰而发生的。

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

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

6 个答案:

更多/更好的信息HERE

CSS-in-JS方式

CSS Way

另一种CSS方式