React-to-print: Can't get pageStyle prop to override any styling

[alextotheroh]

An example on how to use this would be nice. API docs say pageStyle is passed as a string, but no matter what I've tried I haven't been able to override the default styling of the component. Thanks!

[MatthewHerbst]

Hi @alextotheroh Can you please share an example of how you are trying to use pageStyle? Thanks

[alextotheroh]

edit: I've just realized: is pageStyle just for the @page css rule? Perhaps I've made a bad assumption.

I was trying to override a box shadow so there wouldn't be one in the printed component.
I tried 3 ways that I can recall before moving on to a different solution:

var styleOverrides = {
  boxShadow: "0px 0px 0px 0px #000000"
};
var styleOverrides = `
  .my-component-classname {
    box-shadow: 0px 0px 0px 0px #000000;
  }
`;
var styleOverrides = `
  box-shadow: 0px 0px 0px 0px #000000;
`;

<ReactToPrint 
  pageStyle={styleOverrides}/>

Above code wouldn't compile, but hopefully you get the idea. I was using only one of the values for styleOverrides. And also, to be clear, my ReactToPrint component irl was fully fledged with trigger and content- it worked, the box shadow just remained against my will.

My initial confusion stemmed from the fact that inline styles are typically passed as _objects_ in React, while your API documentation indicates pageStyle is passed as a _string_. If passed as a string, I don't know exactly what I'm supposed to pass, and I couldn't find it in your docs. Thanks very much for your time!

[jawetzel]

Same problem, solution was not using style overrides. Instead using @media print in my css files

@media print {
  .PrintSection{
    padding: 40px !important;
  }
}

<div>
    <div ref={this.printRef} className="PrintSection">
        <h1>
            <div className="btn btn-primary pull-right">
                <ReactToPrint className={"pull-right"}
                    trigger={() => <div>Print</div>}
                    content={() => this.printRef.current}
                />
                Hello
            </div>
        </h1>
    </div>
</div>

[alextotheroh]

Yes, that's what I ended up doing too. That is a workaround though. If there is a mechanism to set pageStyle on the object, it should be clearly documented and it should work.

[MatthewHerbst]

The intended functionality (from looking at the code) is to be able to use the second option you provided:

var styleOverrides = `
  .my-component-classname {
    box-shadow: 0px 0px 0px 0px #000000;
  }
`;

It should override global styles on print, since we append it as the last style tag to the head of the page. Do you see any problems with how we do this in the code?

[akafaneh]

i have same issue here where i want to specify the size to be landscape using the @page, but even the work around above is not working for me, any solution for now?

[x5engine]

it's pretty clear and easy! the pageStyle prop is a string

<ReactToPrint
            trigger={() => (
              <Button variant="success" size="sm">
                Print Invoice!
              </Button>
            )}
            pageStyle='@page { size: auto; margin: 0mm; } @media print { body { -webkit-print-color-adjust: exact; padding: 40px !important; } }'
            content={() => this.componentRef}
          />

[Muhammad-Hammad-codex]

it's pretty clear and easy! the pageStyle prop is a string

<ReactToPrint
            trigger={() => (
              <Button variant="success" size="sm">
                Print Invoice!
              </Button>
            )}
            pageStyle='@page { size: auto; margin: 0mm; } @media print { body { -webkit-print-color-adjust: exact; padding: 40px !important; } }'
            content={() => this.componentRef}
          />

Should we set the page size to A4 or A5 kindly let me know if its possible.

[MatthewHerbst]

@Muhammad-Hammad-codex that depends on what type of paper you are printing on

[dsc-jerome-dc]

Same problem, solution was not using style overrides. Instead using @media print in my css files

@media print {
  .PrintSection{
    padding: 40px !important;
  }
}

<div>
    <div ref={this.printRef} className="PrintSection">
        <h1>
            <div className="btn btn-primary pull-right">
                <ReactToPrint className={"pull-right"}
                    trigger={() => <div>Print</div>}
                    content={() => this.printRef.current}
                />
                Hello
            </div>
        </h1>
    </div>
</div>

Putting margin/padding on container does not put margin to the top/bottom of next page (each page)
@page { margin: 10mm; } not seems to work tho