Prevent expands 'React-select' when click on it

Question

I'm using the react-select library https://react-select.com/home#getting-started. Trying to reduce select to dimensions width: 90px; height: 23px. However, when you click on it, select increases. How to set the above parameters so that select has a cay time of width: 90px; height: 23px?

Demo here: https://stackblitz.com/edit/react-sk7g4x

import Select from 'react-select'

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
]

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }

  render() {
    return (
      <Select options={options} />
    );
  }
}

CSS

.css-2b097c-container {
  width: 90px;
  height: 23px;
  font-size: 10px;
}

.css-yk16xz-control {
  min-height: 23px;
}

.css-1pahdxg-control {
  min-height: 23px;
}

.select__control--is-focused {
  min-height: 23px;
}

.css-tu25sd-control {
  height: 23px;
}

.selectSort .css-aohzbe-control {
  height: 23px;
}

.selectSort .css-1hwfws3 {
  padding: 0;
}

.css-tlfecz-indicatorContainer {
  padding: 0;
}

.css-yk16xz-control {
  height: 23px;
}

Answer 1

Try using the props classNamePrefix. If you don't use this, react-select creates dynamic prefix names such as css-tu25sd-c.. They aren't reliable.

<Select options={options} classNamePrefix='my-className-prefix' />

For more props info see: https://github.com/JedWatson/react-select#props Edited solution. Try use the classNamePrefix props, update your css to match the dynamic css classes and run in your editor.

h1, p {
  font-family: Lato;
}

.css-2b097c-container {
  width: 90px;
} 

.my-className-prefix-container,
.my-className-prefix__control {
  width: 90px !important;
  height: 3px !important;
}

.my-className-prefix__value-container,
.my-className-prefix__indicator-separator,
.my-className-prefix__dropdown-indicator {
  position: relative;
  bottom: 8px;
}

.my-className-prefix__control--is-focused {
  height: 23px;
}

.select__control--is-focused,
.css-1pahdxg-control {
  min-height: 23px;
}

.my-className-prefix__placeholder,
.my-className-prefix__value-container,
.my-className-prefix__menu {
  font-size: 10px;
}

.css-yk16xz-control {
  min-height: 23px;
  max-height: 23px;
}