如何为MUI TextField的下拉选项添加垂直滚动功能？

当然可以实现这个需求。MUI的TextField（启用select属性时）底层基于Select组件，你可以通过配置MenuProps来控制下拉菜单的滚动行为。

具体实现方法 #

给TextField添加MenuProps属性，在其中设置菜单的最大高度与垂直溢出规则：

• 通过sx设置maxHeight（比如300px，可根据你的模态框高度调整）
• 配置overflowY: 'auto'，当选项内容超过最大高度时自动出现垂直滚动条

修改后的代码示例 #

<TextField 
  select
  label="My Label"
  variant="outlined"
  sx={styles.textField}
  value={myValue}
  onChange={handleChange}
  // 新增菜单滚动配置
  MenuProps={{
    sx: {
      maxHeight: 300, // 自定义菜单最大高度
      '& .MuiMenu-list': {
        overflowY: 'auto',
      },
    },
  }}
>
  {myMenuItems.map((item) => {
    return (
      <MenuItem
        key={item.key}
        value={item.key}
      >
        {item.content}
      </MenuItem>
    );
  })}
</TextField>

补充说明 #

• 你可以根据模态框的实际高度调整maxHeight数值，确保下拉菜单不会超出模态框边界
• & .MuiMenu-list是直接定位到菜单的列表容器，保证滚动行为只作用于选项列表本身
• 该配置不会改变TextField的原有交互逻辑，仅优化下拉菜单的显示效果

内容的提问来源于stack exchange，提问作者FE-P