时间戳

首页 > 解决方案 > 如何使用 react material-ui 编写媒体相关代码？

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

问题描述

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

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

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

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

标签： cssreactjsmaterial-ui

解决方案

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

推荐阅读