Reactjs 文本字段：跨越多行的helperText

我有

TextField

和

helperText

。我想让

helperText

跨越多行。为此，我需要某种换行。材质UI呈现

{helperText}

。因为在html中，段落中的换行符是由

给出的，所以我尝试将其添加到文本中。但是，这只是将

添加到文本中。我还尝试在组件外部定义

helperText

，一次使用

，一次使用

\n

。但这也不起作用

如何在

帮助文本中正确添加换行符

我的代码示例：

handleDataChange（“helper_text”，event.target.value）}
helperText={“该值将显示在字段下方，就像此文本一样。
此
文本应放在第二行。”}
/>

结果示例：

helperText
道具可以接受一个
反应节点
，因此您可以添加一个

元素来像这样打断换行符：

<TextField
  fullWidth
  helperText={
    <>
      The value will be shown be shown below the field, just like this text
      is.
      <br />
      This
      <br /> text should go in the second line.
    </>
  }
  {...props}
/>

您可以使用CSS/JSS设置的宽度
const useStyles = makeStyles({
  textField: {
    "& .MuiFormHelperText-root": {
      width: 250
    }
  }
});

export default function BasicTextFields() {
  const classes = useStyles();

  return (
    <TextField
      fullWidth
      className={classes.textField}
      helperText="The value will be shown be shown below the field, just like this text is. This text should go in the second line."
      label="Outlined"
      variant="outlined"
    />
  );
}