如何修改MUI Autocomplete中MenuItem的内边距（高度）？

首先你代码里有个拼写错误：paddinTop 应该是 paddingTop，先修正这个低级错误再测试：

<Autocomplete
  ...
  renderOption={(props, option) => (
    <MenuItem
       {...props}
       key={option.id}
       sx={{ paddingTop: '20px', paddingBottom: '20px' }}>
           {option.userName}
       </MenuItem>
   )}
  ...
/>

如果修正后还是不生效，是因为MUI默认样式优先级更高，试试下面两种可靠的方法：

• 方法一：直接给Autocomplete设置全局下拉项样式
  不用单独修改每个MenuItem，通过Autocomplete的sx属性直接定位下拉选项的类名，一次性修改所有选项的内边距：

  <Autocomplete
    ...
    sx={{
      '& .MuiAutocomplete-option': {
        paddingTop: '20px',
        paddingBottom: '20px',
        // 可选：调整左右内边距，比如 paddingLeft: '24px'
      },
    }}
    ...
  />
  

• 方法二：提升MenuItem样式优先级
  在MenuItem的sx中用更具体的选择器覆盖默认样式，避免被全局样式覆盖：

  <Autocomplete
    ...
    renderOption={(props, option) => (
      <MenuItem
         {...props}
         key={option.id}
         sx={{
           '&.MuiMenuItem-root': {
             paddingTop: '20px',
             paddingBottom: '20px',
           },
         }}>
             {option.userName}
         </MenuItem>
     )}
    ...
  />
  

如果需要统一调整上下左右内边距，可以用缩写：padding: '20px 16px'（保持左右默认16px，仅修改上下高度）。

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