如何使用 ReactJS 设置 Material UI 的 ComboBox 自动完成高度

Question

尝试设置组件（输入）的高度但没有成功，知道如何解决这个问题吗？

这是codesandbox： 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 个选项要显示，则您不想将高度设置得更大。