React-to-print: pageStyle - size not works?

[hoangdoan267]

I add pageStyle prop to my PrintComponent but it doesn't work with specific size like "A4 portrait" or "A4 landscape".

class Example extends React.Component {
  render() {
    return (
      <div>
        <ReactToPrint
          trigger={() => <a href="#">Print this out!</a>}
          content={() => this.componentRef}
        />
        <PrintComponent
          ref={el => (this.componentRef = el)}
          pageStyle="@page { size: A4 portrait;}"
        />
      </div>
    );
  }
}

export default Example;

[lidaof]

I have this issue too, any solutions? Can I specify a much big width?

[Khyzz]

Some problem here, widthand heightdoesn't work, even with an !important

[gregnb]

Anyone else having issues?

[loverdeveloper]

@gregnb
is this fix?

[NguyenTheSon]

same issues

[akafaneh]

Same issue here, any update or work around for now?

[cathysandstrom]

The component has a prop called pageStyle which allows you to override the default window print styling that is used by react-to-print. I'm not 100% sure on how this is used at the moment, but setting it to an empty string will remove the resizing done by the component.
Hope this helps!

<ReactToPrint
          trigger={() => <a href="#">Print this out!</a>}
          content={() => this.componentRef}
          pageStyle={""}
/>

[ruizhengyun]

@lidaof @Khyzz @NguyenTheSon
I got these question, you can use html tag not class name. Such as

:global {
    .patchPrintStyle {
        section {
            display: block !important;
        }
        article {
            height: 100% !important;
        }
        * {
            border: 0 none !important;
        }
    }
}