Reactjs React Material UI自动完成组件的下拉位置不正确

在展开“材质UI自动完成”组件时，将按预期打开下拉列表。然而，一旦它被打开，我滚动它就会移动，而不是停留在自动完成框的下方。我发现，对于我使用的材质ui版本，这种行为应该得到修复。我还在沙盒上的一个简单的新项目中测试了它，在那里它工作得很好

因此，我希望不情愿地覆盖一些重要的样式设置，但无法找出错误。有什么好主意吗？

以下是相关的代码片段：

The component where I render the Autocomplete component
const useStyles = makeStyles(theme => ({
...,
  vinBox: {
    width: 320,
    marginTop: "4px"
  }
}));
...
return (
    <Autocomplete
      id="vin-selection"
      options={allVehicleVins}
      className={classes.vinBox}
      onChange={(event, data) => setFilter({ ...filter, vin: data })}
      value={filter.vin}
      renderInput={params => (
        <TextField
          {...params}
          margin={"normal"}
          label="VIN"
          variant="standard"
          InputProps={{
            ...params.InputProps,
            startAdornment: (
              <InputAdornment position="start">
                <DirectionsCar />
              </InputAdornment>
            )
          }}
          helperText={
            "Choose a VIN to filter for specific vehicles of your fleet."
          }
          fullWidth
        />
      )}
    />
  );
};

---

好的，经过大量测试，我发现了错误。我在

src

文件夹中有一个

index.css

。在那里，我有以下风格：

body {
  ...
  overflow-y: scroll;
  ...
} 

改变这一点就成功了。希望这对阅读本文的人有所帮助：）

sooo

我发现了这个错误，但找不到正确的答案

因此，我的解决方案是：

const Pop = props => {
  const { className, anchorEl, style, ...rest } = props
  const bound = anchorEl.getBoundingClientRect()
  return <div {...rest} style={{
    position: 'absolute',
    zIndex: 9999,
    width: bound.width
  }} />
}

const Pop=props=>{
const{className，anchorEl，style，…rest}=props
const bound=anchorEl.getBoundingClientRect（）
返回
}

及

顺便说一句，App.js组件中的my Main主题没有覆盖此自动完成组件的任何样式。中有一个名为PopperComponent的道具，可以帮助您确定选项的位置。请提交一个codesanbox可复制的示例。@keikai感谢您让我知道！我设置了自动完成的

PopperComponent={“bottomstart”}

。在滚动时，这有助于保持选项的位置。但是，这些选项现在不再与其他元素重叠，而是向内挤压并具有容器的宽度。。如何为PopperComponent传递更多选项或相应地采用样式？我不太理解这方面的文档。通过尝试在沙盒中复制它，我发现了我的错误。所以，感谢你的帮助，而不是真正能够帮助：）祝你有一个愉快的一天@Mohamedayadi

const Pop = props => {
  const { className, anchorEl, style, ...rest } = props
  const bound = anchorEl.getBoundingClientRect()
  return <div {...rest} style={{
    position: 'absolute',
    zIndex: 9999,
    width: bound.width
  }} />
}

<Autocomplete
   ...
   PopperComponent={Pop}
   ...
/>