React中如何隔离文件CSS？引入pdf.css遇样式覆盖问题

以下是几种无需全量修改现有项目CSS的可行方案：

• 给PDF容器添加专属父类，提升选择器优先级
  给PDF渲染的根容器添加一个唯一类名（比如pdf-viewer-wrapper），然后批量修改pdf.css中的所有选择器，在前面加上这个父类前缀。例如：

  • 原选择器：.page { ... }
  • 修改后：.pdf-viewer-wrapper .page { ... }
    可以用编辑器的正则替换功能快速完成，比如全局匹配^(\.[a-zA-Z0-9-]+)并替换为.pdf-viewer-wrapper $1，无需改动现有项目的CSS代码。

• 利用框架的Scoped样式（Vue/React等）
  如果你的项目基于Vue，给PDF相关组件的<style>标签加上scoped属性，将pdf.css的内容移入或通过@import引入，框架会自动为这些样式添加专属属性选择器，实现样式隔离。
  React项目则可以使用CSS-in-JS方案（如styled-components），将PDF相关样式封装在组件内部，天然避免全局样式冲突。

• 使用Shadow DOM完全隔离样式
  通过Shadow DOM创建一个独立的渲染环境，PDF.js的内容和样式都在Shadow DOM内部运行，完全不受外部项目CSS的影响：

  // 获取PDF容器元素
  const pdfContainer = document.getElementById('pdf-container');
  // 创建Shadow Root
  const shadowRoot = pdfContainer.attachShadow({ mode: 'open' });
  // 引入pdf.css到Shadow DOM
  const styleLink = document.createElement('link');
  styleLink.rel = 'stylesheet';
  styleLink.href = './path/to/pdf.css';
  shadowRoot.appendChild(styleLink);
  // 初始化PDF.js并将内容渲染到shadowRoot中
  pdfjsLib.getDocument('target.pdf').promise.then(pdfDoc => {
    // 这里的渲染逻辑将元素挂载到shadowRoot下
  });
  

  该方案无需修改任何现有CSS或pdf.css，兼容性覆盖绝大多数现代浏览器。

• 使用CSS层叠（@layer）规则
  利用CSS的@layer特性指定样式优先级：

  1. 在项目全局样式文件的最顶部添加：@layer project, pdf;
  2. 在pdf.css的开头添加：@layer pdf;
     这样pdf层的样式优先级会高于project层，自动覆盖冲突的样式规则。注意该特性需要Chrome 99+、Firefox 97+及以上版本支持，如需兼容旧浏览器可搭配降级方案。

内容的提问来源于stack exchange，提问作者Md Rakibul Islam