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

The answer below was given when react-select v2 was in beta, much has changed since then.

Read the react-select docs HERE

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.

CSS-in-JS way

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

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

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

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

Answer 2

Try passing in a value for the maxMenuHeight prop:

<Select
  maxMenuHeight={190}
/>

see documentation

Answer 3

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 4

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

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

Answer 7

From a similar question also on SO, you can modify the react-select theme to change the height of the control. Seems easier to me than the other answers.

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

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

For more, see Theme modifier method at this page of the docs.