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

Question

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

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

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

关于如何实现这一目标的任何想法？

Answer 1

目前 useMediaQuery 是不稳定的文档

?? useMediaQuery 不稳定，因为钩子还不稳定，因此它以不稳定的前缀导出。请注意，它取决于 react@next 和 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);