react-to-print隐藏footer后CSS颜色丢失，如何保留组件颜色？

我正在使用react-to-print库将React组件打印为PDF格式。

相关代码如下：

export default function Index() {

  const handlePrint = useReactToPrint({
    content: () => componentRef.current,
    copyStyles: true,
    pageStyle: print,
  });
     

  return (
    <>
      <button onClick={handlePrint}>print</button>
      <div ref={componentRef}>
        <Header
          title="Seguro de Carro - Comparar Resultados"         
        />
      
        <HomeComparePackage packages={comparePack} />
        <HomeCompareMobile packages={comparePack} />
      </div>
    </>
  );
}

原本打印时PDF中会包含footer，因此我添加了如下配置：

const print = `
@media print {
  footer {
    display: none;
  }
}
`;

const handlePrint = useReactToPrint({
  content: () => componentRef.current,
  copyStyles: true,
  pageStyle: print,
});

但修改后，组件的CSS颜色不再生效。请问是否有办法在隐藏footer的同时保留组件的CSS颜色？

问题出在自定义的pageStyle覆盖了react-to-print默认打印样式，加上浏览器默认会忽略部分打印颜色属性，导致组件颜色失效。可以通过以下两种方案解决：

方案一：追加打印样式而非替换 #

将pageStyle设为函数，在默认样式基础上追加隐藏footer和强制颜色打印的规则：

const handlePrint = useReactToPrint({
  content: () => componentRef.current,
  copyStyles: true,
  pageStyle: () => `
    @media print {
      footer {
        display: none;
      }
      /* 强制浏览器打印元素颜色 */
      * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
      }
    }
  `,
});

方案二：全局CSS中添加打印样式 #

直接在项目全局CSS文件中添加打印媒体查询，无需通过react-to-print的pageStyle传递：

@media print {
  footer {
    display: none;
  }
  /* 确保颜色被正常打印 */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

然后修改react-to-print配置，移除自定义的pageStyle：

const handlePrint = useReactToPrint({
  content: () => componentRef.current,
  copyStyles: true,
});

核心要点 #

• print-color-adjust: exact（含webkit前缀）用来强制浏览器打印背景色、文字色等样式，避免浏览器默认忽略这些属性。
• 直接传递完整的@media print规则作为pageStyle会覆盖react-to-print内部的基础打印样式，导致原有组件样式失效，因此优先选择追加样式的方式。

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