使用CSS Modules或Shadow DOM可有效避免第三方库的样式污染。CSS Modules通过构建时将类名转换为唯一标识，实现局部作用域，确保样式仅作用于当前组件；Shadow DOM则提供真正的样式隔离，内部样式不泄露、外部样式不穿透，适合独立组件封装；若无法模块化，可手动添加容器类前缀限定作用域；还可通过动态加载与移除样式表减少长期污染风险。根据项目场景选择合适方案，推荐优先采用CSS Modules或Shadow DOM从根本上解决冲突问题。
在使用第三方CSS库时，样式污染是常见问题。这些库通常定义全局选择器（如 body、h1、button），容易影响页面原有样式。为避免这种全局污染，可以通过模块隔离手段控制作用范围。
使用 CSS Modules 实现局部作用域
CSS Modules 是构建时方案，它将类名自动映射为唯一标识，确保样式仅作用于当前组件。
示例：
- 创建 Button.module.css：
.button {
background: blue;
color: white;
padding: 8px 12px;
}
- 在组件中导入：
import styles from './Button.module.css';
<p>function Button() {
return <button className={styles.button}>点击</button>;
}</p>这样即使第三方库也有 .button，也不会冲突。
立即学习“前端免费学习笔记（深入）”；
Shadow DOM 隔离样式
Shadow DOM 提供真正的样式隔离，其内部样式不会泄露，外部样式也不会穿透。
适合封装独立组件：
const div = document.createElement('div');
const shadow = div.attachShadow({mode: 'open'});
<p>shadow.innerHTML = <code> <style> button { background: green; color: white; } </style> <button>独立按钮</button> </code>;
document.body.appendChild(div);</p>这个按钮的样式不会受页面其他CSS影响。
限定作用域：前缀或命名空间
若无法使用模块化方案，可手动为第三方库添加容器类前缀，限制其作用范围。
例如：
<div class="third-party-lib"> <!-- 第三方组件内容 --> </div>
然后重写其样式规则，加上父级限定：
.third-party-lib button {
/* 覆盖样式 */
}
.third-party-lib h1 {
margin: 0;
}
这样样式只在该容器内生效。
动态加载与移除样式表
按需加载第三方CSS，并在不需要时移除，减少长期污染风险。
示例：
function loadStyle(src) {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = src;
link.dataset.owner = 'third-party';
document.head.appendChild(link);
return link;
}
<p>// 使用后移除
function removeStyle(link) {
link.remove();
}</p>通过标记来源，便于统一管理。
基本上就这些方法，根据项目场景选择即可。对现代前端工程推荐优先使用 CSS Modules 或 Shadow DOM，从根本上解决样式冲突问题。
