Draft.js HTML格式化内容在UI中样式不生效问题求助

你遇到的核心问题是：Draft.js已经正确生成了带格式的HTML（比如包含<strong>这类标签），但用Material UI的Typography组件展示时，这些HTML标签的样式完全没生效——本质原因是你把HTML字符串直接当成普通文本渲染了，React不会自动解析这些标签，只会把它们原样显示成文字内容。

看你的代码，onChange里已经通过draftToHtml把编辑器内容转成了HTML字符串，但在Typography里直接输出这个字符串的方式不对。要让React解析HTML并应用对应样式，得用dangerouslySetInnerHTML属性。

修改后的代码示例 #

把原来的Typography部分改成这样：

<Box
  mt={2}
  display="flex"
  justifyContent="space-between"
  alignItems="center"
>
  <Box>
    <Typography variant="subtitle2">
      {formikForm.values.dta ? (
        <span dangerouslySetInnerHTML={{ __html: formikForm.values.dta }} />
      ) : (
        'Add data here.'
      )}
    </Typography>
  </Box>
</Box>

为什么这样能解决？ #

dangerouslySetInnerHTML是React提供的专门用来渲染HTML字符串的属性，它会把传入的__html内容解析成真实的DOM元素，这样<strong>这类标签就能正常生效，显示对应的加粗样式了。

额外提醒 #

虽然属性名带“dangerously”，但如果你的HTML内容是从Draft.js生成的（而非用户直接输入的未过滤内容），风险很低——因为Draft.js生成的HTML是可控的，不会包含恶意脚本。如果是用户自由输入的内容，建议先做XSS过滤再渲染。

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