Material UI InputLabel组件未按预期对齐问题求助

异常原因 #

• 冗余组件冲突：你已经在密码输入框上方添加了自定义<p>标签作为字段提示，又额外声明了独立的InputLabel组件，同时还给OutlinedInput传入了label="Password"属性，三者的定位逻辑冲突导致标签错位。
• 组件关联缺失：如果单独使用InputLabel和OutlinedInput而非封装好的TextField组件，需要手动绑定两者的状态与ID关联，你没有做这层配置，导致InputLabel无法适配OutlinedInput的外边框样式，出现偏移。

解决方案 #

方案一（推荐，和邮箱字段逻辑统一） #

直接使用Material UI封装好的TextField组件实现密码输入，自动处理标签和输入框的对齐逻辑，只需将密码可见性的图标作为InputProps传入即可，替换原有密码相关的InputLabel、OutlinedInput、FormHelperText代码即可：

<TextField
  id="outlined-adornment-password"
  label="Password"
  variant="outlined"
  color="secondary"
  name="password"
  fullWidth
  type={values.showPassword ? 'text' : 'password'}
  value={values.password}
  onChange={handleChange('password')}
  helperText="Enter a 6 digit password"
  InputProps={{
    endAdornment: (
      <InputAdornment position="end">
        <IconButton
          aria-label="toggle password visibility"
          onClick={handleClickShowPassword}
          onMouseDown={handleMouseDownPassword}
          edge="end"
        >
          {values.showPassword ? <VisibilityOff /> : <Visibility />}
        </IconButton>
      </InputAdornment>
    )
  }}
/>

方案二（保留单独使用OutlinedInput的写法） #

如果你需要保留现有拆分写法，删除额外声明的独立InputLabel组件即可，OutlinedInput的label属性配合外层FormControl会自动处理浮动标签的定位，无需额外单独声明InputLabel。
如果不需要输入框边框上的浮动标签，同时删除OutlinedInput的label="Password"属性即可，输入框不会预留标签位置，样式更紧凑。

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