Chakra UI Code组件显示JSON.stringify格式化结果无换行如何解决

• Chakra UI 原生Code组件默认未配置保留空白字符的CSS属性，浏览器渲染时会自动将JSON.stringify生成的换行、缩进空格合并为单个空格，所以最终展示为压缩格式。控制台输出默认采用white-space: pre类的样式规则，会保留所有空白字符，因此显示符合预期。
• 你之前用p标签包裹没有生效，是因为p标签默认的white-space属性同样为normal，还是会折叠空白字符。

直接给Code组件传入whiteSpace样式属性即可，Chakra UI支持直接在组件props中传递CSS属性：

<Code whiteSpace="pre-wrap" children={JSON.stringify(data, null, 2)} />

如果希望代码超出容器宽度时出现横向滚动条，不自动折行，可以换成pre值，外层套一个带溢出滚动的容器即可：

<Box overflowX="auto" w="full">
  <Code whiteSpace="pre" children={JSON.stringify(data, null, 2)} />
</Box>

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