Changing height of react-select component
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}
/>
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',
}),
};