React Material-UI 中的排版

Question

我有这个文本框：

<Typography component="p" className={classes.text}>
        {this.props.post.text}
</Typography>

我希望能够包含段落，但输入的所有文本都打印在一行上。

文档表明这paragraph是默认的，false所以我必须将它设置为“true”。

我尝试了以下方法：

<Typography component="p" className={classes.text} paragraph="true">

我也试过：

<Typography component="p" className={classes.text} paragraph={true}>

两者都不起作用，所以我所有的文本仍然打印到一行。

如何让段落显示？

附加信息： 据我所知，Typography 中的段落={true} 属性只是为整个文本添加了一个下边距。IE 我的一个文本块是一个段落。如果我想要另一个段落，我将不得不添加另一个Typography. 就像是：

<Typography component="p" className={classes.text} paragraph={true}>
        {this.props.post.text}
</Typography>
<Typography component="p" className={classes.text} paragraph={true}>
        {this.props.post.text2}
</Typography>

这不正是我想要的。也许我的目标是让我的输入文本中的返回字符得到识别。这是正确的，如果是，它是如何完成的？

我试过这个：

  <pre>
    <Typography component="p" className={classes.text}>
      {this.props.post.text}
    </Typography>
  </pre>

标签按原样保留标签内的空格和换行符。

不过这不合适。如果我有很长的行，文本不会以卡片宽度换行。相反，超出卡片宽度的任何内容都会被截断。显然我想要这一切。我希望我的文本能够包裹在卡片中，并支持新的行和段落。这是怎么做的？

Answer 1

更好的方法是利用 css 的力量：

white-space: pre-line

如果您使用此 css 属性，将尊重“换行”字符。

编辑：Ionut-Alexandru Baltariu 的帮助

<Typography id="modal-description" sx={{ whiteSpace: 'pre-line'}}>

Answer 2

对于新段落

<Typography>
  {this.props.text.split("\n").map((i, key) => {
    return <p key={key}>{i}</p>;
  })}
</Typography>

仅用于新线路

<Typography>
  {this.props.text.split("\n").map((i, key) => {
    return <div key={key}>{i}</div>;
  })}
</Typography>

Answer 3

我想出了这个：

<Typography component="p" className={classes.text}>
  {this.props.post.text.split("\n").map((i, key) => {
    return <p key={key}>{i}</p>;
  })}
</Typography>

如果有更好的方法来做到这一点，我很想听听。

Answer 4

我尝试了你的答案，它根据需要完美地工作。但是，控制台返回一个小错误

警告：validateDOMNesting(...):<p>不能作为 的后代出现<p>。

我通过替换with 中的<p>标签并将其全部包装在 a 中，从而稍微改进了您的答案，如下所示：.map()<Typography><div>

<div className={classes.text}>
  {this.props.post.text.split('\n').map((i, key) => {
    return <Typography key={key} paragraph variant="body1">{i}</Typography>;
  })}
</div>

（您可以替换body1为您想要的任何变体！）

这似乎消除了对我的警告，我希望按您的意愿工作。