材质 UI 自动完成下拉位置

Question

如何禁用自动完成自动位置？

想要始终在底部显示自动完成选项。

https://codesandbox.io/s/material-demo-forked-t1luy?file=/demo.js

Answer 1

添加带有修饰符的 popper 道具：

<Autocomplete
  id="combo-box-demo"
  options={top100Films}

  /* ...yourProps */

  componentsProps={{
    popper: {
      modifiers: [
        {
          name: 'flip',
          enabled: false
        },
        {
           name: 'preventOverflow',
           enabled: false
         }
      ]
    }
  }}

  renderInput={(params) => (
    <TextField {...params} label="Combo box" variant="outlined" />
  )}
/>

Answer 2

你可以用flexbox来做

您可以用Autocompletea 包裹您的组件div并添加以下样式

    <div style={{display: 'flex', alignItems: 'flex-end'}}>
        <Autocomplete
          id="combo-box-demo"
          options={top100Films}
          getOptionLabel={(option) => option.title}
          style={{ width: 300}}
          renderInput={(params) => (
            <TextField {...params} label="Combo box" variant="outlined" />
          )}
        />
    </div>