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

Try passing in a value for the maxMenuHeight prop:

<Select
  maxMenuHeight={190}
/>

see documentation

Answer 2

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