React页面如何配置@page全局样式 确保打印导出PDF时规则生效

@page是浏览器提供的全局打印规则，无法绑定到特定DOM元素（嵌套在类选择器下会直接失效），你可以选以下任意一种方案实现需求：

• 方案1：组件内直接引入全局样式文件
  把你写的@page规则存放到单独的CSS/SCSS文件中，建议外层包裹打印媒体查询，避免非打印场景的潜在冲突：

  // custom-print.scss
  @media print {
    @page {
      size: 5in 6in;
      margin: 1in 1in 1.25in 1in;
    }
  }
  

  在你的页面组件顶部直接引入这个文件即可，不需要给main标签绑定任何和@page相关的类名：

  // 页面组件文件
  import './custom-print.scss'; // 替换为你的样式文件实际路径
  
  export default function PageComponent() {
    return (
      <MyThemeProvider theme={frog}>
        <main className="page-container">
              {/* 页面业务内容 */}
        </main>
      </MyThemeProvider>
    )
  }
  

  如果你用的是CSS Modules方案，记得把@page规则写在:global块内，不要放在局部作用域里，否则编译后规则会失效。

• 方案2：组件挂载时动态注入样式（适合单页面专属规则，避免全局污染）
  如果你不希望这套@page规则影响其他页面的打印效果，可以在当前组件挂载时动态把样式插入到head标签，组件卸载时移除样式：

  import { useEffect } from 'react';
  
  export default function PageComponent() {
    useEffect(() => {
      // 避免重复注入
      if (document.getElementById('page-print-style')) return;
      const styleEl = document.createElement('style');
      styleEl.id = 'page-print-style';
      styleEl.textContent = `
        @media print {
          @page {
            size: 5in 6in;
            margin: 1in 1in 1.25in 1in;
          }
        }
      `;
      document.head.appendChild(styleEl);
  
      return () => {
        const targetStyle = document.getElementById('page-print-style');
        targetStyle?.remove();
      }
    }, [])
  
    return (
      <MyThemeProvider theme={frog}>
        <main className="page-container">
              {/* 页面业务内容 */}
        </main>
      </MyThemeProvider>
    )
  }
  

验证提示：代码部署完成后，直接调用浏览器打印功能选择导出PDF，即可看到设置的纸张尺寸、边距规则生效，不需要给页面DOM节点额外绑定和@page相关的选择器。

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