TextField：跨多行的helperText

Question

我有TextField一个helperText. 我想让helperText跨度多行。为此，我需要某种换行符。Material-UI 渲染<p>{ helperText }</p>。由于在 html 中，段落中的换行符是由<br/>我尝试将其添加到我的文本中的。然而，这只是将其添加<br/>到文本中。我还尝试定义helperText组件的外部，一次使用 the <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

helperTextprops 可以接受 a 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"
/>