media query "print" not behaving as expected

[georgiosApo]

Hello all!

Been scratching my head here for a while but can't really seem to get this to work.

What I want to achieve:
Print out a component that has it's parent div set to display: hidden.

I've seen similar issues addressed before but I was unable to get my issue solved with any of the tips in the previous threads.

Maybe I'm missing something obvious?

What I have tried to do to achieve this is the following:

The component that should be printed

import { forwardRef } from 'react'

const PrintableTable = forwardRef<HTMLDivElement>((_, ref) => {
  return (
    <div className="printable" ref={ref}>
      <h1>Printable table</h1>
      <h2>This is a test component to print</h2>
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis repudiandae non, error officia vel doloribus porro accusantium illo quae incidunt veniam exercitationem deleniti eos, aut dolores. Architecto impedit tenetur ipsam.</p>
    </div>
  )
})

export default PrintableTable

The component that calls the function

import { useRef } from 'react'
import { useReactToPrint } from 'react-to-print'
import Button from '../components/Button'
import FilterInput from '../components/FilterInput'
import PrintableTable from '../components/PrintableTable'
import SelectSection from '../components/SelectSection'
import Table from '../components/Table'

const Home = () => {
  const tableRef = useRef(null)

  const handlePrint = useReactToPrint({
    content: () => tableRef.current
  })

  // Only used for handling undefined call in TS file
  const handleClick = () => {
    handlePrint ? handlePrint() : console.log('handlePrint is not defined')
  }

  return (
    <div>
      <Button label="Print" variant="sm" onClick={handleClick} />
      <PrintableTable ref={tableRef} />
    </div>
  )
}

export default DriversList

And this is my global css file (I've tried a lot of things and this is the current state that file is in now. Not too pretty)

.printable {
  color: orange;
  display: none;
}

@media print {
  .printable, .printable * {
    color: violet;
    display: block !important;
  }
}

Now the issue is, I get it to behave almost as I want. The content is hidden on the screen (nothing shows in @media screen) but I can't see anything but the background colors in the PDF preview window when I attempt to print with useReactToPrint.
No texts what so ever. The backgrounds are only there to demonstrate that I can get something to show in the preview at all. This is as far as my debugging has come.
Interestingly enough, triggering the print modal (by pressing cmd+P) displays the preview as expected without any issues.

I've tried on Chrome (Version 93.0.4577.63) and Safari (Version 14.1.2). Same issue.

Running:
React v.17.0.2
React dom v.17.0.2
react-to-print v.2.14.1

Thanks a bunch in advance for your help!
Appreciate any leads that can point me in the right direction.

Best regards,
// G

[MatthewHerbst]

Hi there. Thanks for using the library, and happy to help debug. Without seeing the rest of the content and the styles that apply to it, are you running into the second pitfall listed on the README by chance? If the styles for the text and what not are applied on a parent node, that node won't be included in the print and so the styles from it won't be applied either. Otherwise it looks like you're doing everything the right way, but happy to help dig deeper if that's not the issue. I do see the color style in your @media print but is that the only style needed for the content to be correct?

[georgiosApo]

Hello @MatthewHerbst !
Clearly the second pitfall was related to my issue. I really should have paid more attention to the readme.

I had some additional styles besides my printable class and media query in my App.css that I commented out. And luckily enough I was able to see the text content!

Big steps in the right direction.

I managed to narrow the culprit down to the custom font-family property.

I added a simple:

body {
    font-family: Arial, Helvetica, sans-serif;
}

to my @media print query which flawlessly solved my issue.

Thank you so much for your help with this. Tomorrow will be a productive day. 🎉

[MatthewHerbst]

Great to hear it! And apologies for the // Only used for handling undefined call in TS file you need to do 😢 That's because we support older versions of React that don't have hooks and so calling handlePrint would be a no-op. Maybe we should return a function that throws an error instead to avoid having to do the type issue, I'll make that change this weekend

[georgiosApo]

No worries at all, that sounds like a great idea!

[MatthewHerbst]

Published in v2.14.2!