css - 如何使用 react material-ui 编写媒体相关代码？

Question

通过阅读文档，我认为后来material-ui中的好解决方案是useMediaQuery，但充其量我无法正确解决。我的目标是在打印页面时隐藏菜单，所以我写了如下内容:

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

编译执行良好，但不起作用。当浏览器进入打印预览模式 (FF 65) 时，似乎没有呈现组件。

知道如何实现这一点吗？

Answer 1

目前 useMediaQuery 不稳定 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.

我发现的最佳选择是:

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);