Как установить высоту автозаполнения ComboBox для пользовательского интерфейса материала, используя ReactJS

Question

Попытка установить высоту компонента (ввода) безуспешно, есть идеи, как сделать трюк?

Вот коды и окна: https://codesandbox.io/s/dkicr?file= / demo. js

Answer 1

Предполагая, что вы говорите о высоте элемента, содержащего список опций - вы можете использовать свойство ListboxProps Autocomplete, чтобы установить свойства списка.

Оттуда Вы можете установить стиль контейнера:

<Autocomplete
  id="combo-box-demo"
  options={top100Films}
  getOptionLabel={(option) => option.title}
  style={{ width: 300 }}
  renderInput={(params) => <TextField {...params} label="Combo box" variant="outlined" />}
  ListboxProps={
    {
      style:{
          maxHeight: '150px',
          border: '1px solid red'
      }
    }
  }
/>

Обратите внимание на maxHeight (а не height), потому что вы не хотите устанавливать высоту, если у вас есть только 1 вариант для отображения.