React使用dangerouslySetInnerHTML展示HTML页面样式不一致问题

• 补全全局样式差异
  React项目通常会引入CSS重置工具（比如normalize.css）或者自定义全局样式，和纯HTML页面的默认浏览器样式存在差异。对比纯HTML页面的样式表，把缺失的全局样式（比如默认字体、元素边距、链接样式等）补充到React项目的全局样式文件中。

• 引入插入HTML依赖的样式文件
  如果纯HTML里包含自定义CSS类，这些对应的样式文件必须在React项目中通过import引入，或者直接在全局样式里定义好对应的类规则，否则插入的HTML元素无法匹配到样式。

• 突破CSS模块化的作用域限制
  若使用了CSS模块化（例如文件命名为[name].module.css），模块内的样式仅作用于当前组件的元素，不会影响dangerouslySetInnerHTML插入的内容。可以通过两种方式解决：

  • 将需要作用于插入HTML的样式放到全局CSS文件（如global.css）中
  • 在模块化样式里用:global()伪类声明全局生效的样式，示例：

    :global(.article-title) {
      font-size: 20px;
      font-weight: bold;
    }
    

• 内联样式兜底调整
  若上述方法操作不便，可直接给插入HTML的外层div添加内联样式，或者修改data字符串，给内部元素加上内联样式，强制样式生效。示例：

  <div style={{ lineHeight: 1.6, color: '#333' }} dangerouslySetInnerHTML={{ __html: data }} />
  

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