如何调整MUI Autocomplete组件输入框的高度

你当前的问题在于只调整了fieldset的高度，但MUI的TextField和内部InputBase组件还有默认的内边距、最小高度等样式限制，导致高度无法真正缩小。可以通过以下修改来实现：

调整后的完整代码 #

<FormControl sx={{ width: '100%' }}>
  <Autocomplete
    sx={{
      // 控制Autocomplete容器的高度
      height: '2.3rem',
      // 调整InputBase的样式，去除默认内边距和最小高度
      '& .MuiInputBase-root': {
        minHeight: 'unset',
        padding: '0 0.75rem',
        // 对齐输入文本
        display: 'flex',
        alignItems: 'center',
      },
      // 调整fieldset的样式，不要硬设height，让它自适应容器
      '& && fieldset': {
        border: `${isError ? '1.5px solid #DE350B' : '1.5px solid #D4D5D8'}`,
        borderRadius: '0.1875rem',
      },
      '&:hover && fieldset': {
        border: `${isError ? '1.5px solid #DE350B' : '1.5px solid #616E84'}`,
      },
      '&.Mui-focused && fieldset': {
        border: `${isError ? '1.5px solid #DE350B' : '1.5px solid #3C4C68'}`,
      },
    }}
    className={`${classes.dropdownSelect} h3Medium`}
    value={value}
    onChange={handleChange}
    autoWidth
    displayEmpty
    name={name}
    disablePortal
    options={options}
    renderInput={(params) => (
      <TextField
        {...params}
        size="small"
        placeholder="Select"
        // 移除TextField默认的padding
        sx={{ '& .MuiInputBase-input': { padding: 0 } }}
      />
    )}
  />
</FormControl>

关键修改点说明 #

• 移除了fieldset的硬设height，改为让它自适应容器高度，避免内容溢出
• 针对MuiInputBase-root设置minHeight: 'unset'，取消默认最小高度限制，同时调整内边距来控制整体高度
• 给MuiInputBase-input设置padding: 0，去除输入文本区域的默认内边距
• 给Autocomplete容器设置height，确保整体容器高度符合需求

这样修改后，输入框的高度会按照你设置的2.3rem来渲染，同时保持文本垂直居中，边框样式也能正常生效。

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