MUI中使用startAdornment时Label位置异常的解决方案：实现输入为空时标签与图标同行、输入时标签上移

我懂你的需求——要让输入框为空时Label和左侧图标处在同一行，用户开始输入后Label自动上浮到顶部。咱们可以通过自定义样式来实现这个效果，核心是针对InputLabel的不同状态调整位置，同时适配输入框的内边距避免内容重叠。

下面是修改后的完整代码，我会拆解关键调整点：

import { FormControl, Input, InputLabel, InputAdornment, IconButton } from '@mui/material';
import { Visibility, VisibilityOff } from '@mui/icons-material';

// 假设你的values、handleChange等函数已提前定义
<FormControl sx={{ m: 1, width: '25ch' }} variant="standard">
  <InputLabel
    htmlFor="standard-adornment-password"
    sx={{
      // 输入框为空且未聚焦时的Label样式
      '&:not(.Mui-focused):not(.MuiInputLabel-shrink)': {
        position: 'absolute',
        left: '40px', // 和左侧图标宽度对齐，可根据实际图标尺寸调整
        top: '50%',
        transform: 'translateY(-50%)',
        pointerEvents: 'none', // 避免Label挡住输入框的点击交互
      },
      // 输入框有内容或聚焦时，保持Label上浮到顶部的原生样式
      '&.MuiInputLabel-shrink': {
        left: 0,
        top: '-10px',
        transform: 'none',
      },
    }}
  >
    Password
  </InputLabel>
  <Input
    id="standard-adornment-password"
    type={values.showPassword ? 'text' : 'password'}
    value={values.password}
    onChange={handleChange('password')}
    sx={{
      // 空状态下给输入框左侧加内边距，防止内容和Label重叠
      '&:not(.Mui-focused):not(.MuiInput-inputAdornedStart)': {
        paddingLeft: '40px',
      },
    }}
    startAdornment={
      <InputAdornment position="start">
        <IconButton
          aria-label="toggle password visibility"
          onClick={handleClickShowPassword}
          onMouseDown={handleMouseDownPassword}
        >
          {values.showPassword ? <VisibilityOff /> : <Visibility />}
        </IconButton>
      </InputAdornment>
    }
  />
</FormControl>

关键调整说明： #

• InputLabel状态控制：
  • 用&:not(.Mui-focused):not(.MuiInputLabel-shrink)选择器匹配「输入框为空且未聚焦」的状态，把Label定位到图标右侧并垂直居中，实现和图标同行的效果。
  • 当输入框有内容或被聚焦时，MUI会自动给Label添加MuiInputLabel-shrink类，我们通过这个类把Label恢复到顶部位置，保留原生交互体验。
• Input内边距适配：
  • 空状态下给输入框左侧添加和图标宽度一致的内边距，避免输入内容和Label重叠；当输入框有内容或聚焦时，内边距会自动回到默认值。

如果你的图标宽度不是40px，直接调整left和paddingLeft的数值即可，确保Label和图标对齐。

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