React中如何在MUI Box组件的subtitle属性内实现多行内容展示

错误原因 #

你之前的写法问题在于：<br> 是JSX元素，本质是JavaScript对象，直接和字符串做 + 拼接时，对象会被强制转为 [object Object] 字符串，因此会得到你看到的异常渲染结果。

可行解决方案（均不需要新增组件属性） #

方案1：直接传递JSX结构（推荐）

MUI体系下组件的内容属性一般都支持传入React节点类型，你直接把subtitle的值设为包含换行/段落结构的JSX即可：

{
  title: 'Title',
  subtitle: (
    <>
      {string1}
      <br />
      {string2}
    </>
  ),
}

如果需要拆分独立段落，也可以直接嵌套 <p> 标签：

{
  title: 'Title',
  subtitle: (
    <>
      <p>{string1}</p>
      <p>{string2}</p>
    </>
  ),
}

方案2：使用换行符+CSS控制（适配subtitle仅支持字符串的场景）

如果你的Box组件对subtitle属性做了限制，仅支持传入字符串，可以用换行符 \n 拼接内容，再给内部渲染subtitle的容器添加 white-space: pre-line 样式即可识别换行：
首先构造subtitle字符串：

{
  title: 'Title',
  subtitle: `${string1}\n${string2}`,
}

然后在Box组件内部渲染subtitle的位置添加样式，假设你用MUI的Typography渲染subtitle：

<Typography variant="body2" sx={{ whiteSpace: 'pre-line' }}>
  {subtitle}
</Typography>

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