Border top and bottom

[HumanMu]

@MatthewHerbst I am trying to print a multi page component and calling the pageStyle automatically adding the header and footer which is very nice. But all the css that I am adding to the pageStyle get ignored beside of margin and padding which working fine.

But I want to add a border line at the bottom and the top of the every page which get ignored no matter using the global.css or inline css. Here is my code. I have tried and searched at the last two days but couldnt come across a solution yet:

import ReactToPrint from 'react-to-print';
  export function handleExportPdf (componentRef: React.RefObject<HTMLDivElement> ) {  
    return(
      <ReactToPrint
        bodyClass="print-agreement"
        content={() => componentRef.current}
        copyStyles={true}
        pageStyle={
          `@page {
            size: A4 portrait; 
            margin: 0.2in;
            border{
              border: 1px solid black;
            } 
          }

          @media print {
            body {
              margin: 0;
            }}`
          }
        trigger={() => (
          <button className="btn btn-primary"> Print </button>
        )}
      />
    )
  }

Thnk in advance

[Yashkapure06]

@HumanMu you can use following style to break the page and you will find the border is implemented. pageBreakAfter: "always"

pageStyle={
          `@page {
            size: A4 portrait; 
            margin: 0.2in; 
            border: 1px solid black !important;// add !important to forcefully set the border
            //you can also try
            scale: 0.92 !important;// not necessary but you can try, you can change the value like wise in range of 0 to 1
          }

          @media print {
            body {
              margin: 0;
            }}`