Changing height of react-select component

Question

I am using the react-select component along with bootstrap v4

all of bootstraps stuff is based on 35px height it seems, the default height of the react-select component is 38px, which looks a little odd.

Any ideas how I can change the height of the component?

It is using some weird JS styling library I have never come across before. I have managed to get it to mimic the outline on focus using it, but the height escapes me, any help much appreceiated

You can play with it here

Answer 1

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

Answer 2

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