如何让MUI TextField输出内容保留换行？求最优解决方案

方案1：用CSS样式快速解决 #

给右侧展示文本的div添加white-space: pre-wrap样式，无需修改输入的字符串，HTML会自动识别换行符并正确渲染：

<Stack direction="row" alignItems="start" justifyContent="start" mb={5}>
  <TextField 
      name="Content" placeholder="Content" multiline={true}
      value={content}
      rows={18}
      sx={{width: '100%'}}
      onChange={(e) => setContent(e.target.value)}
      />
 <div style={{maxWidth:"50%", paddingLeft:"10px", whiteSpace: 'pre-wrap'}}>
   {content}
 </div>
</Stack>

white-space: pre-wrap的作用是保留文本中的换行符，同时允许内容超出容器宽度时自动换行，比纯pre样式更适配不同容器大小。

方案2：替换换行符为HTML标签 #

如果需要通过dangerouslySetInnerHTML渲染，在generateContent函数里把输入文本的\n替换为<br>标签（建议先转义特殊字符避免XSS风险）：

const generateContent = (text) => {
  const escapedText = text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
  return escapedText.replace(/\n/g, '<br>');
};

之后保持原有的div结构即可，这种方式适合需要额外处理HTML格式的场景。

内容的提问来源于stack exchange，提问作者Tom Galland