How-to write media dependant code with react material-ui?

Question

by reading the documentation, I thought the good solution in later material-ui was useMediaQuery, but at best I can't get it right. My goal is to hide a menu when the page is printed, so I wrote something like:

if (!useMediaQuery("print")) {
  ... code to be hidden
}

which compiles an execute fine, but doesn't work. It seems that the component isn't rendered when the browser goes in print preview mode (FF 65).

Any idea on how to acheive this?

Answer 1

At the moment useMediaQuery is unstable doc

⚠️ useMediaQuery is unstable as hooks aren't stable yet, therefore it is exported with an unstable prefix. Please note that it depends on react@next and react-dom@next.

The best option that i found is:

const styles  = {
    myClass:{
        '@media print' : {
            display: 'none'
    }}
}
class MyComponent extends React.Component {
    render() {
        const { classes } = this.props;
        return (
            <div className={classes.myClass}>
                No show on print
            </div>
        );
    }
}
export default withStyles(styles)(MyComponent);