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

Question

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

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

Answer 1

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

从那里您可以设置容器的样式:

<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'
      }
    }
  }
/>

Note the maxHeight (and not height) because you don't want to set the height to be larger if you have only 1 option to show.