React Select auto size width

Question

When using react-select it is not auto sizing by option value, but using width:100% as you can see in picture:

Options are short:<

Answer 1

Update: for people who are using React-Select for a "tags autocomplete" feature but are having trouble where it sets a style width that is too narrow based on the previous tag you searched, this is what works for me:

Set a style of:

.myCustomPrefix__value-container > div {
  width: auto !important;
}

Set classNamePrefix="myCustomPrefix" in the component (docs).

---

Old answer:

See the official docs at https://react-select.com/styles#style-object

I originally thought that setting width to "auto" for option worked for me:

const customStyles = {
    option: (styles, { data, isDisabled, isFocused, isSelected }) => {
      return {
        ...styles,
        fontSize: '12px',
        textAlign: 'left',
        width: 'auto',
      }
    },
  }

...

return (
    //https://react-select.com/props
    
  )