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

Question

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

这里是代码框： https://codesandbox.io/s/dkicr?file=/demo.js

Answer 1

假设您正在谈论包含选项列表的元素的高度 - 您可以使用Autocomplete 的ListboxProps 属性来设置列表框的属性。

从那里你可以设置容器的样式：

<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 个选项可显示，您不想将高度设置得更大。