Changing height of react-select component

Spending hours, I end up with this to get exact 30px height of react select with border 1px:

  const customStyles = {    control: (provided, state) => ({      ...provided,      background: '#fff',      borderColor: '#9e9e9e',      minHeight: '30px',      height: '30px',      boxShadow: state.isFocused ? null : null,    }),    valueContainer: (provided, state) => ({      ...provided,      height: '30px',      padding: '0 6px'    }),    input: (provided, state) => ({      ...provided,      margin: '0px',    }),    indicatorSeparator: state => ({      display: 'none',    }),    indicatorsContainer: (provided, state) => ({      ...provided,      height: '30px',    }),  };

You can add your styles to any part of the select components, take a look at the relevant docs

here is a working demo of what you ask for.

In your case the code that you need to add will look something like this:

const customStyles = {  control: base => ({    ...base,    height: 35,    minHeight: 35  })};

and in the select component:

<Select          className="basic-single"          classNamePrefix="select"          defaultValue={colourOptions[0]}          isDisabled={isDisabled}          isLoading={isLoading}          isClearable={isClearable}          isRtl={isRtl}          isSearchable={isSearchable}          name="color"          options={colourOptions}          styles={customStyles} />

I was barely able to make the Select component as small as 32px (in my browser) using the theme attribute. It works well when the height is greater than 45px. You can also omit the baseUnit attribute.

It didn't work for small sizes.

  const theme = (theme: Theme) => ({    ...theme,    spacing: {      ...theme.spacing,      controlHeight: 30,      baseUnit: 0,    }  });

<Select options={props.options} theme={theme}/>