如何在修改Material-UI TextField高度后实现标签垂直对齐

问题原因 #

你当前仅通过InputProps修改了输入框外层容器的高度，没有同步调整label标签的默认偏移、输入文本的内边距等MUI内置样式规则，因此会出现标签对齐异常的问题。

解决方案 #

方案1：使用内置size属性（优先推荐）

如果你的高度需求和MUI官方预设尺寸匹配，直接使用size属性即可，不需要手动修改高度，所有样式自带适配：

<TextField
  // 可选值：small / medium，对应两种预设高度
  size="small"
  label="测试标签"
  variant="outlined"
/>

方案2：自定义非标准高度

如果需要设置特殊高度，需要同时调整容器高度、label偏移、输入区内边距三个维度的样式，以下是两种实现方式：

方式1：通过内置Props配置

const CUSTOM_HEIGHT = 50 // 替换为你需要的实际高度

<TextField
  label="测试标签"
  variant="outlined"
  InputLabelProps={{
    style: {
      // 适配自定义高度调整label初始位置
      transform: `translate(14px, ${(CUSTOM_HEIGHT - 14) / 2}px) scale(1)`
    }
  }}
  InputProps={{
    style: {
      height: CUSTOM_HEIGHT,
      alignItems: 'center'
    },
    // 调整内层输入文本的内边距
    inputProps: {
      style: { padding: '0 14px' }
    }
  }}
/>

方式2：通过sx属性全局覆盖（更简洁）

<TextField
  label="测试标签"
  variant="outlined"
  sx={{
    // 自定义输入框高度
    '& .MuiInputBase-root': {
      height: 50
    },
    // 调整label初始位置
    '& .MuiInputLabel-root': {
      transform: 'translate(14px, 18px) scale(1)',
      // 调整label聚焦/有值时的上浮位置
      '&.MuiInputLabel-shrink': {
        transform: 'translate(14px, -9px) scale(0.75)'
      }
    }
  }}
/>

以上代码适配variant="outlined"的TextField，如果使用filled/standard变体，仅需微调transform的偏移数值即可。

内容的提问来源于stack exchange，提问作者m.mahdi_rasouli