无法降低MUI Basic Select下拉框高度，应如何正确调整？

你给FormControl加padding不生效，是因为Select组件的高度由内部输入元素的内边距控制，不属于FormControl的样式覆盖范围，按以下方式修改即可：

方案1：使用预设小尺寸（改动最小） #

直接给Select组件添加size="small"属性，即可用官方预设的紧凑高度：

<Select
  labelId="demo-simple-select-label"
  id="demo-simple-select"
  value={age}
  label="Age"
  onChange={handleChange}
  size="small"
>

方案2：自定义高度（灵活调整） #

如果预设的小尺寸还是不符合需求，通过sx属性修改内部输入框的上下内边距即可，数值按需调整：

<Select
  labelId="demo-simple-select-label"
  id="demo-simple-select"
  value={age}
  label="Age"
  onChange={handleChange}
  sx={{
    '& .MuiOutlinedInput-input': {
      // 上下内边距改得越小，整体高度越低
      padding: '6px 14px'
    }
  }}
>

若需调整展开后下拉菜单的高度 #

如果是点击后弹出的选项列表高度过高，添加MenuProps配置即可：

<Select
  labelId="demo-simple-select-label"
  id="demo-simple-select"
  value={age}
  label="Age"
  onChange={handleChange}
  MenuProps={{
    PaperProps: {
      sx: {
        // 设定菜单最大高度，超出后自动显示滚动条
        maxHeight: 180,
        // 可选：缩小每个选项的上下内边距，进一步压缩整体高度
        '& .MuiMenuItem-root': {
          paddingTop: '4px',
          paddingBottom: '4px',
          minHeight: 'auto'
        }
      }
    }
  }}
>

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