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

Answer 1

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