在 React 中动态渲染富文本 HTML 时，需防止应用全局 CSS 影响其内部样式，同时阻止其内联样式外溢；可通过 CSS all: unset 结合 scoped 容器实现双向样式隔离。
在 react 中动态渲染富文本 html 时，需防止应用全局 css 影响其内部样式，同时阻止其内联样式外溢；可通过 css `all: unset` 结合 scoped 容器实现双向样式隔离。
当使用 react-html-parser（或 DOMPurify + dangerouslySetInnerHTML）动态渲染 HTML 字符串（如 <div><p class="highlight">Hello</p></div>）时，常面临两大样式冲突问题：
- 外部污染：项目中定义的全局样式（如 p { margin: 0; color: #333; }）会意外覆盖 HTML 内部原有样式；
- 内部泄漏：HTML 自带的 .highlight { background: yellow; } 可能通过 CSS 选择器影响页面其他组件。
✅ 正确解法：使用 all: unset 实现样式重置隔离
all: unset 会重置元素所有可继承和不可继承的 CSS 属性（相当于移除所有样式继承与默认 UA 样式），是比 inherit 更彻底、更安全的选择——而原答案中的 all: inherit 反而会加剧外部样式渗透，属于典型误用。
推荐实现方式如下：
import { parse } from 'react-html-parser';
import './HtmlRenderer.css'; // 独立样式文件
const HtmlRenderer = ({ html }: { html: string }) => {
return (
<div className="html-renderer">
{html ? parse(html) : null}
</div>
);
};配套 CSS（HtmlRenderer.css）：
React Best Practices 2 0.1.0
下载
React 与 Next.js 性能优化指南，源自 Vercel 工程团队。适用于编写、审查或重构 React/Next.js 代码时使用。
立即学习“前端免费学习笔记（深入）”；
/* 关键：为容器及其所有后代强制样式重置 */
.html-renderer,
.html-renderer * {
all: unset;
}
/* 重新启用必要继承属性（如 font, color, direction），提升可读性 */
.html-renderer {
font-family: system-ui, -apple-system, sans-serif;
font-size: 1rem;
line-height: 1.5;
color: inherit; /* 允许继承父级文字颜色（可控） */
}
/* 可选：为常见标签恢复基础布局行为 */
.html-renderer p,
.html-renderer div,
.html-renderer section {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
}
.html-renderer a {
color: #007bff;
text-decoration: underline;
}⚠️ 注意事项：
- ❌ 避免使用 all: inherit（会导致外部样式穿透，违背隔离目标）；
- ✅ 优先用 all: unset，再按需显式声明基础排版属性；
- ? 若 HTML 来源不可信，务必配合 DOMPurify.sanitize() 过滤 XSS 风险，切勿直接 dangerouslySetInnerHTML；
- ? 对于复杂场景（如需支持 CSS-in-JS 主题切换），可结合 <iframe sandbox="allow-scripts"> 实现完全 DOM 级隔离（开销略高，但最安全）。
总结：样式隔离的本质是「重置 → 受控重建」。all: unset 是现代 CSS 提供的精准手术刀，配合语义化容器类名与最小化重设策略，即可在 React 应用中安全、高效地嵌入第三方 HTML 内容。
