How to reduce the size of React Select in v2

问题:

The new v2 react-select control is great, but by default is too large. Is there a (preferably) simple way to reduce the height to the same as a standard select control (using Bootstrap v3)?

回答1:

React-Select v2 uses emotion CSS-in-JS so the new way to control style over the select components and sub-components is by passing a style object to the styles prop. You can also set a className to style with an external stylesheet.

More/Better Info HERE

CSS-in-JS way

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

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

CSS Way

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

.myClassName__control {
    height: 50px;
}

回答2:

Try passing in a value for the maxMenuHeight prop:

<Select
  maxMenuHeight={190}
/>

see documentation

回答3:

Adding onto what @craigmichaelmartin commented, the minHeight on control is important to overwrite, and it needs to be set at a bunch of places in order to really overcome it.
Here's what worked for me to get it to match the height of a 36px text input element (These settings also work in css, of course)

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',
  }),
};

回答4:

Setting the height property looks like it retains that height even when you have overflow (from multiple selected values spilling onto the next line) so you end up with the values falling outside the box.

I solved this issue by setting the padding top and bottom on the dropdownIndicator and the clearIndicator and setting minHeight on control like so:

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

<Select styles={styles}/>

回答5:

You can also try to style the input field of your react-select component, as it can impact the height of the whole react-select component. In my case, this was happening through interference from materializecss.

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

回答6:

Yet another CSS Way

You can also specify classNamePrefix and use it to override CSS styles.

<Select classNamePrefix="mySelect" />

.mySelect__value-container{
 height: 35px;
}