Material UI TextField组件长错误信息如何实现自动换行显示？

核心思路 #

Material-UI的TextField默认错误提示文本是单行截断状态，要实现自动换行，需调整提示文本样式并正确传递动态错误内容：

• 新版Material-UI中，error是布尔属性，仅用于控制是否显示错误状态，动态错误文本需通过helperText传入；
• 默认提示文本的white-space属性为nowrap，将其改为normal即可开启自动换行，还可通过max-width限制换行宽度。

代码示例 #

方式1：用makeStyles自定义样式

import { TextField, makeStyles } from '@material-ui/core';

const useStyles = makeStyles({
  errorHelperText: {
    whiteSpace: 'normal',
    maxWidth: '300px', // 可按需调整宽度，移除则自适应父容器
  },
});

function DynamicErrorTextField() {
  const classes = useStyles();
  // 动态错误字符串示例
  const dynamicErrorMsg = "这是一段很长的动态错误信息，需要根据容器宽度自动换行显示多行内容，测试测试测试测试测试测试测试测试测试";

  return (
    <TextField
      outlined
      error={!!dynamicErrorMsg} // 有错误内容时激活错误状态
      helperText={dynamicErrorMsg}
      FormHelperTextProps={{ className: classes.errorHelperText }}
    />
  );
}

方式2：内联样式快速实现

import { TextField } from '@material-ui/core';

function DynamicErrorTextField() {
  const dynamicErrorMsg = "这是一段很长的动态错误信息，需要根据容器宽度自动换行显示多行内容，测试测试测试测试测试测试测试测试测试";

  return (
    <TextField
      outlined
      error={!!dynamicErrorMsg}
      helperText={dynamicErrorMsg}
      FormHelperTextProps={{
        style: { whiteSpace: 'normal', maxWidth: '300px' }
      }}
    />
  );
}

说明 #

设置whiteSpace: 'normal'后，错误文本会根据容器宽度自动换行；若无需限制宽度，可移除maxWidth属性，文本将自适应TextField的宽度换行。

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