在 React 应用中动态渲染富文本（如通过 html-react-parser）时，常因 CSS 全局作用域导致样式相互干扰：外部样式侵入 HTML 内容，或 HTML 自带样式泄露到其他组件。本文介绍使用 all: unset 实现样式沙箱隔离的可靠方案。
在 react 应用中动态渲染富文本（如通过 `html-react-parser`）时，常因 css 全局作用域导致样式相互干扰：外部样式侵入 html 内容，或 html 自带样式泄露到其他组件。本文介绍使用 `all: unset` 实现样式沙箱隔离的可靠方案。
当使用 parse(html) 渲染第三方 HTML 片段（例如编辑器导出内容、邮件模板或 CMS 富文本）时，其内联样式或 <style> 标签可能与应用全局 CSS 产生冲突。更关键的是，现代 CSS 的层叠性会使 .btn { color: blue } 这类通用选择器意外影响 HTML 内部的 <button>，反之亦然。
✅ 正确做法：使用 CSS all: unset 创建样式隔离边界
all 是一个简写属性，可一次性重置所有 CSS 属性（包括继承属性）。相比 inherit（会继承父级样式，反而加剧污染），unset 在继承属性上表现如 inherit，在非继承属性上则等效于 initial——即彻底“清空”样式，回归浏览器默认值，从而切断与全局样式的关联。
推荐方案如下：
import { parse } from 'html-react-parser';
import './HtmlRenderer.css'; // 单独引入隔离样式
const HtmlRenderer = ({ html }: { html: string }) => {
return (
<div className="html-sandbox">
{html ? parse(html) : null}
</div>
);
};对应 CSS（HtmlRenderer.css）：
立即学习“前端免费学习笔记（深入）”；
/* 样式沙箱：重置所有子元素样式，阻断全局 CSS 泄露 */
.html-sandbox * {
all: unset;
}
/* 恢复必要继承属性（如字体、颜色需显式设置） */
.html-sandbox {
font-family: system-ui, -apple-system, sans-serif;
color: #333;
line-height: 1.6;
}
/* 可选：为常见标签定义基础样式（安全、可控） */
.html-sandbox p,
.html-sandbox h1,
.html-sandbox h2,
.html-sandbox ul,
.html-sandbox ol {
margin: 0.5em 0;
padding: 0;
}
.html-sandbox a {
color: #0066cc;
text-decoration: underline;
}⚠️ 注意事项：
- ❌ 避免使用 div * { all: inherit } —— 它会让子元素继承父容器的样式（如 font-size、color），而父容器本身可能已受全局 CSS 影响，导致“二次污染”；
- ✅ 始终配合 className 使用（而非无差别 div *），确保作用域精准，不干扰其他组件；
- ? 若 HTML 含 <style> 标签，all: unset 无法禁用其规则（CSS 优先级更高），建议服务端或解析前剥离 <style> 和 style= 属性；
- ? 测试时检查表单控件（<input>、<select>）是否仍可交互——all: unset 会移除默认外观，需手动恢复基础 UI 属性（如 border、padding）。
总结：all: unset 是目前最简洁、标准且兼容性良好的样式隔离手段（支持 Chrome 37+、Firefox 27+、Safari 9.1+、Edge 12+）。它不依赖 Shadow DOM（兼容性差、React 集成复杂），也不需 iframe（性能开销大、跨域限制多），是生产环境动态 HTML 渲染的首选防护策略。
