小编Sea*_*ead的帖子

我正在尝试将 Simplebar 滚动条添加到 MUI Material Autocomplete 组件，而不是默认的浏览器滚动条。所有这些都有效，但这样做我失去了使用键盘导航选项列表的能力。

MUI 文档中有这个片段

\n

ListboxComponent\n如果提供自定义 ListboxComponent 属性，则需要确保目标滚动容器的 role 属性设置为 listbox。这可以确保滚动的正确行为，例如在使用键盘导航时。

\n

但我不知道该怎么做。

以下代码来自 MUI 文档，第一个带有自定义 ListboxComponenet 和缩短的电影列表的自动完成示例。（https://mui.com/components/autocomplete/）

import * as React from \'react\';\nimport TextField from \'@mui/material/TextField\';\nimport Autocomplete from \'@mui/material/Autocomplete\';\n\nimport SimpleBar from "simplebar-react";\nimport "simplebar/dist/simplebar.min.css";\n\nexport default function ComboBox() {\n  return (\n    <Autocomplete\n      disablePortal\n      id="combo-box-demo"\n      options={top100Films}\n      ListboxComponent={SimpleBar}\n      sx={{ width: 300 }}\n      renderInput={(params) => <TextField {...params} label="Movie" />}\n    />\n  );\n}\n\n// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top\nconst top100Films = …