ReactJS如何通过ReactToPrint实现仅打印时显示自定义分割线

你的实现思路是正确的，但代码存在3处语法/逻辑错误，导致当前无法满足仅打印时显示分割线的需求，具体问题和修正方案如下：

存在的问题 #

• 1. CSS属性写法错误：你在@media print中写的borderLeft是JSX/内联样式的驼峰命名，原生CSS媒体查询中需要使用短横线命名border-left，且属性末尾的逗号要改为标准CSS语句结束符分号。
• 2. 类名匹配失效：Material UI的makeStyles会自动为生成的类名添加哈希后缀（实际渲染类名格式为css-xxxx-vl），你在媒体查询中写的.vl选择器无法匹配到页面上的分割线元素。
• 3. @page语法错误：@page规则中size属性的!important写在了分号外侧，不符合CSS语法规范。

修正方案 #

方案一（推荐）：将打印规则合并到makeStyles定义中 #

直接在vl的样式定义内添加打印媒体查询，不需要额外在pagePrintStyle中写.vl相关规则，自动适配哈希类名：

const useStyles = makeStyles(() => ({
  vl: {
    borderLeft: "1px solid #fff",
    height: "100%",
    position: "absolute",
    left: "50.9%",        
    top: "0",
    // 新增打印媒体查询
    '@media print': {
      borderLeft: '1px solid #181818 !important'
    }
  },
}));

方案二：保留pageStyle写法，添加固定全局类名 #

给分割线元素添加固定的无哈希类名：

<div className={`${classes.vl} print-vl`}></div>

然后修正pagePrintStyle中的语法：

const pagePrintStyle = `
  @media print {               
    table {
        font-size: 16.5px !important;                    
    }
    td {
        padding: 0.2rem !important;
    }
    .print-vl {            
        border-left: 1px solid #181818 !important;
    }
  }

  @page { 
    size: 11.0in 8.5in !important;
    margin:20mm 5mm 32mm 5mm;       
  }     
`;

修正后即可实现：普通浏览时分割线为白色隐藏，打印时自动切换为黑色显示的需求。

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