How to use media print within Reactjs web app

Question

I would like to hide a div when print preview happens but I find it almost impossible to do it in a React.

<div className="contacts"></div>

Is there any possibilities that I can add pure css or if React Stylesheet supports @media print and hide element with class name contacts when print preview.

I was reading this article https://blog.logrocket.com/the-best-react-inline-style-libraries-comparing-radium-aphrodite-emotion-849ef148c473 but it just seems too much work for something that I would do poorly in css within a matter of seconds.

Any idea how can I achieve such thing in Reactjs?

Answer 1

Inline media queries are not possible. The closest you can get is inlining a stylesheet, like so (in React syntax):

<div className="contacts">
  <style>
    {`@media print {.contacts{display: none;}}`}
  </style>
</div>

Answer 2

A bit old but maybe it will be useful for someone. If you want to use React styles you can also do:

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    contacts:{
      display: "block",
    },
    [`@media print`]: {
      contacts:{
        display: "none",
      },
    }
  }))
...
const classes = useStyles();
...
<div className={classes.contacts}></div>

This markup works for me with FunctionComponents flawlesly.