How to reduce the size of React Select in v2

Question

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)?

Answer 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;
}

Answer 2

Try passing in a value for the maxMenuHeight prop:

<Select
  maxMenuHeight={190}
/>

see documentation

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

Answer 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}/>

Answer 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={...}
  />
);