如何为带select属性的MUI TextField设置下拉菜单最大高度？

你当前代码里设置了SelectProps={{ native: true }}，这意味着MUI会渲染原生HTML select元素，而非MUI自定义的Menu组件，所以MenuProps自然不会生效——MenuProps是给MUI自定义Menu组件用的，原生select不识别这个属性。

要给原生select的下拉菜单设置最大高度，需要直接给原生select元素添加样式，具体写法如下：

<TextField
  fullWidth
  label="Select State"
  name="state"
  onChange={handleChange}
  required
  select
  SelectProps={{
    native: true,
    sx: {
      maxHeight: 200,
      overflowY: 'auto'
    }
  }}
  value={values.state}
>
  {states.map((option) => (
    <option
      key={option.value}
      value={option.value}
    >
      {option.label}
    </option>
  ))}
</TextField>

原理说明 #

• 当native: true时，SelectProps中的属性会直接传递给内部渲染的原生<select>标签
• 通过sx给原生select设置maxHeight和overflowY: 'auto'，当下拉选项过多时，会自动出现垂直滚动条，限制下拉区域的高度

如果你不需要依赖原生select的特性，也可以去掉native: true，此时就能使用MenuProps控制下拉菜单高度，写法如下：

<TextField
  // 其他属性不变
  select
  SelectProps={{
    MenuProps: {
      sx: { maxHeight: 200 }
    }
  }}
>
  {/* 选项内容不变 */}
</TextField>

内容的提问来源于stack exchange，提问作者Rubén Pérez