React中如何解决Material-UI Autocomplete z-index失效并隐藏滚动条

问题1：下拉面板z-index设置不生效，无法显示在输入框后方 #

失效原因 #

Autocomplete 默认会通过 Popper 组件将下拉面板挂载到 <body> 下的独立 Portal 节点，完全脱离当前组件的 DOM 层叠上下文，直接给内部 Paper 组件设置 z-index 无法突破 Popper 自带的层级规则，因此自定义的负 z-index 不会按预期生效。

修复操作 #

• 给 Autocomplete 组件添加 disablePortal 属性，强制下拉面板渲染在当前组件的 DOM 树内部，和输入框共享同一个层叠上下文
• 移除 Autocomplete 根节点上多余的 zIndex: 2 配置，避免根节点生成独立的高层级上下文干扰层级计算
• 给输入框容器单独设置更高的 z-index，保证输入框始终层叠在下拉面板上方
• 原有 Paper 组件上的 zIndex: -1 配置在上述修改完成后即可正常生效

问题2：隐藏下拉面板滚动条，保留正常滚动交互 #

实现方式 #

通过 Autocomplete 的 classes 属性自定义下拉列表容器（listbox）的样式，用跨浏览器兼容的CSS规则隐藏滚动条，不会影响鼠标滚轮滚动、键盘方向键导航选中等原生交互。
首先添加自定义样式类：

.autocompleteListbox {
  -ms-overflow-style: none; /* 兼容IE、旧版Edge */
  scrollbar-width: none; /* 兼容Firefox */
}
.autocompleteListbox::-webkit-scrollbar {
  display: none; /* 兼容Chrome、Safari、新版Edge */
}

将该样式类绑定到 Autocomplete 的 classes.listbox 上即可。

修正后的完整组件代码 #

<Autocomplete
  id="nba teams"
  options={list}
  disableClearable
  disablePortal // 禁用Portal，让下拉面板在当前DOM树内渲染
  classes={{ 
    paper: styles.paper,
    listbox: styles.autocompleteListbox // 绑定隐藏滚动条的样式类
  }}
  renderInput={(params) => (
    <TextField
      classes={{ root: styles.input }}
      {...params}
      InputProps={{
        ...params.InputProps,
        disableUnderline: true,
        style: { position: 'relative', zIndex: 3 } // 抬高输入框层级
      }}
      placeholder="Search for Creators"
    />
  )}
  PaperComponent={({ children }) => (
    <Paper
      style={{
        width: '280px',
        backgroundColor: '#f4f7f8',
        marginLeft: '-20px',
        marginTop: '5px',
        position: 'absolute',
        zIndex: -1,
      }}
    >
      {children}
    </Paper>
  )}
  freeSolo
  getOptionLabel={(data) => data.name}
  renderOption={(obj) => <Result data={obj} />}
  style={{ width: 280, border: 'none', position: 'relative' }}
  value={selectedTeam}
  onChange={(_event, newTeam) => {
    window.location.href = `/`
    setSelectedTeam(newTeam)
  }}
/>

如果样式通过CSS Module编写，确保autocompleteListbox类已经在对应样式文件中正确定义并引入即可。

内容的提问来源于stack exchange，提问作者Shruthi R