How to use media print within Reactjs web app

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>

You cannot use media queries (also pseudo-classes and pseudo-selectors) inside inline styles. You need to extract your css into a sepparate .css file and to import it either inside your component's file (if you use bundlers like webpack) or just include it inside your html with <link> tag

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.