MUI 5.4 TextField长错误提示时感叹号位置异常求助

使用Material UI 5.4开发登录表单时，验证功能正常，但当错误提示文本较长时，TextField组件的错误感叹号会错位到输入框下方，截图如下：

相关代码：

<Box
  component="form"
  role="form"
  sx={{
    "& .MuiFormHelperText-root": { color: "#d32f2f" },
    "& .MuiInputLabel-formControl": { paddingTop: "5px" },
  }}
>
  <Box mb={2}>
    <TextField
      type="email"
      label="Email"
      variant="standard"
      fullWidth
      onChange={(e) => emailHandler(e)}
      error={emailError}
      helperText={emailError ? emailErrorMessage : ""}
    />
  </Box>
  <Box mb={2}>
    <TextField
      margin="dense"
      type="password"
      label="Password"
      variant="standard"
      fullWidth
      onChange={(e) => passwordHandler(e)}
      error={passwordError}
      helperText={passwordError ? passwordErrorMessage : ""}
    />
  </Box>
  <Box>
    <span style={{ color: "#d32f2f", fontSize: "12px" }}>{error}</span>
  </Box>

  <Typography variant="button" color="info" to="/forgot-password" component={Link}>
    Forgot Password?
  </Typography>

  <Box mt={4} mb={1}>
    <Button variant="gradient" color="newColor" fullWidth onClick={signInHandler}>
      sign in
    </Button>
  </Box>
  <Box mt={3} mb={1} textAlign="center">
    <Typography variant="button" color="text">
      Don't have an account?{" "}
      <Typography
        onClick={() => {
          navigate("/sign-up", { replace: true });
        }}
        style={{ cursor: "pointer" }}
        variant="button"
        color="info"
        fontWeight="medium"
        textGradient
      >
        Sign Up
      </Typography>
    </Typography>
  </Box>
</Box>

解决方法 #

问题根源是standard变体的TextField中，错误图标的垂直定位依赖于单行文本的行高，当helperText换行后，图标会被挤到下方。可以通过以下方式修复：

• 调整错误图标的垂直对齐：在TextField的sx属性中添加对错误图标的定位修正：

<TextField
  // 其他属性不变
  sx={{
    '& .MuiInputAdornment-root.Mui-error': {
      verticalAlign: 'top',
      marginTop: '8px', // 根据输入框实际高度调整，确保图标和输入框对齐
    }
  }}
/>

• 统一表单内所有TextField的样式：如果需要全局修复，可以在父级Box的sx中设置：

<Box
  component="form"
  role="form"
  sx={{
    "& .MuiFormHelperText-root": { color: "#d32f2f" },
    "& .MuiInputLabel-formControl": { paddingTop: "5px" },
    // 添加以下样式
    "& .MuiInputAdornment-root.Mui-error": {
      verticalAlign: "top",
      marginTop: "8px",
    },
  }}
>
  {/* 表单内容 */}
</Box>

• 另一种方案：修改helperText的布局：让helperText和错误图标保持同一行布局，避免图标错位：

sx={{
  '& .MuiFormHelperText-root': {
    display: 'flex',
    alignItems: 'flex-start',
    gap: '4px',
  },
  '& .MuiInputAdornment-root.Mui-error': {
    marginTop: '0',
    alignSelf: 'flex-start',
  }
}}

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