reactjs - 文本字段 : helperText spanning multiple lines

Question

我有 TextField与 helperText .我想做 helperText跨越多行。为此，我需要某种换行符。 Material-UI 渲染 <p>{ helperText }</p> .因为在 html 中，段落中的换行符由 <br/> 给出我试图将其添加到我的文本中。然而，这只是添加了 <br/>进入正文。我也尝试定义 helperText在组件外，一次用 <br/>和一次 \n .但这也不起作用。
如何在 helperText 中正确添加换行符?
我的代码示例:

<TextField
    name={"help message"}
    value={data_field.helper_text}
    onChange={(event) => handleDataChange("helper_text", event.target.value)}
    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."}
/>

结果示例:

Answer 1

helperText props 可以接受 ReactNode ，所以你可以添加一个 <br/> 元素来换行，如下所示:

<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}
/>

@Vaibhav 建议的另一个解决方案是在包含 helperText 的元素上设置宽度:

import { styled } from '@mui/material/styles';
import MuiTextField from '@mui/material/TextField';

const TextField = styled(MuiTextField)({
  '& .MuiFormHelperText-root': {
    width: 250,
  },
});

<TextField
  fullWidth
  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"
/>