Reactjs specific component printing with css

Question

import React, { Component } from "react";

import { Button } from "semantic-ui-react";

class JobReleaseForm extends Component {

render() {
return (

  <div id="no-print">

    <Button onClick={() => window.print()}>PRINT</Button>

    <p>Click above button opens print preview with these words on page</p>

  </div>
);
}
}
    export default JobReleaseForm;

Hello there, I am trying to figure it out how to only print out the contents of this component not the surrounding ones. I found this.

 @media print{
*{display:none;}
#no-print{display:block;}
}

but I cant figure where or how to put it with reactjs. Especially the @media part. Any help is appreciated Thanks

score 2 · Accepted Answer · edited Oct 05 '18 at 00:31

2

While I was waiting I came with this solution

@media print {
  body * {
    visibility: hidden;
  }

  #section-to-print, #section-to-print * {
    visibility: visible;
  }

  #section-to-print {
    position: absolute;
    left: 0;
    top: 0;
  }
}

And it is working just fine for now

Thank you all

edited Oct 05 '18 at 00:31

cjones

8,384
17
81
175

answered Dec 26 '17 at 17:29

benonymus

113
1
1
12

score 0 · Answer 2 · answered Dec 26 '17 at 16:38

Your CSS needs to be adjusted. It's unclear from your css what you want printed or not printed, but the over-reach of * is likely causing problems for you since it targets all elements. Try this instead:

@media print {
  #no-print {
    display: none;
  }
}

And add id="no=print" to everything you want hidden.

score -1 · Answer 3 · answered Dec 26 '17 at 16:50

You should think of an eaiser way to define your media print selectors. What you are doing here is that you are using the wildcard selector, which selects all elements, including the parents of #no-print. Hence, even when no-print's display is set to block, it will not be shown, simply because its parents are set to none. A workaround for your example is to update the css as below. I used the important keyword, wihch is not deisrable to use unless necessary. I am sure there are better ways. However, I found that it is better to let you know the root cause of your issue, and adivce you, instead, to change the entire logic you got. You may also check this.

 @media print{
 :not(#no-print) > *{
  display:none;
 }
 body #no-print{display:block !important;}
 body #root{display:block !important;}
 body {display:block !important;}
}

Reactjs specific component printing with css

3 Answers3