Material-UI Select组件鼠标滚轮无法滚动问题求助

看起来你遇到的是Material-UI下拉菜单容器样式设置不当导致的滚轮失效问题——直接给SelectField设置max-height和overflow-y是没用的，因为这些样式需要作用在下拉菜单的弹出容器上，而不是组件本身。

针对你使用的旧版material-ui/SelectField，可以通过menuProps属性把滚动样式传递给内部的菜单容器，具体代码修改如下：

import React from 'react';
import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem';

// 你的组件代码
const YourComponent = () => {
  return (
    <SelectField
      // 保留你原有的其他属性，比如value、onChange等
      menuProps={{
        style: {
          maxHeight: 200,
          overflowY: 'auto'
        }
      }}
    >
      <MenuItem value="1">选项1</MenuItem>
      <MenuItem value="2">选项2</MenuItem>
      {/* 更多MenuItem选项 */}
    </SelectField>
  );
};

额外排查点： #

• 如果修改后还是无法滚动，检查是否有父组件绑定了onWheel事件并调用了event.preventDefault()，这会阻止滚轮事件传递到下拉菜单。
• 确认你的Material-UI版本：如果是v1及以上的新版（现在叫@mui/material），API略有不同，需要通过MenuProps.PaperProps传递样式：

  import Select from '@mui/material/Select';
  import MenuItem from '@mui/material/MenuItem';
  
  <Select
    // 其他属性
    MenuProps={{
      PaperProps: {
        style: {
          maxHeight: 200,
          overflowY: 'auto'
        }
      }
    }}
  >
    <MenuItem value="1">选项1</MenuItem>
  </Select>
  

这样设置后，下拉菜单的容器就会拥有固定高度并支持滚轮滚动，触控板和鼠标滚轮都能正常工作啦。

内容的提问来源于stack exchange，提问作者Shobhit Gupta