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