一个更好的方法是使用CSS的力量：

white-space: pre-line

如果你使用这个css属性，“新行”字符将被接受。
编辑：来自Ionut-Alexandru Baltariu的帮助

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

新段落

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

我想到了这个

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

如果有更好的方法，我很想听听。

我试过你的答案，它完全按照需要工作。但是，控制台返回一个小错误
Warning：validateDOMNesting（...）：<p>不能显示为<p>的后代。
我稍微改进了你的答案，用<Typography>替换了.map()中的<p>标签，并将其全部 Package 在<div>中，如下所示：

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

(you可以用你想要的任何变体替换body1！）
这似乎摆脱了对我的警告，我希望能像你打算的那样工作。

这真的是一种奇怪的行为。据我所知，你做的一切都是正确的。p本身显示为块元素，因此默认情况下，它应该以您希望的方式显示。但是，可能是你在.text css类中覆盖了它。看看是不是你的问题。如果没有，您可以始终使用变体属性variant="headline"将它们放在新行中。

如果我理解正确，您可以简单地利用HTML的强大功能并添加<br />-元素来插入换行符。

从Material UI V5开始，您现在可以访问许多CSS实用程序作为 prop 。对于空白，您现在可以执行以下操作：

<Typography whiteSpace="pre-line">{this.props.post.text}</Typography>

这对我很有效：

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

在CSS中：

pre {
  white-space: pre-wrap;       /* Since CSS 2.1 */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  word-wrap: break-word;       /* Internet Explorer 5.5+ */
}