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

Question

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

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

可以很好地编译执行，但是不起作用。当浏览器进入打印预览模式（FF 65）时，似乎未呈现该组件。

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

Answer 1

目前useMediaQuery不稳定doc

  

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

Answer 2

我相信useMediaQuery可以按预期工作（即不是useMediaQuery中的错误），但是它利用了window.matchMedia，并且Firefox似乎无法使用该功能来推动打印差异。

这是一个相关的问题：window.matchMedia('print') failing in Firefox and IE

这个简单的示例可以在Chrome中正常运行，但在Firefox 65中却不能。

import React from "react";
import ReactDOM from "react-dom";
import { unstable_useMediaQuery as useMediaQuery } from "@material-ui/core/useMediaQuery";
import "./styles.css";

function App() {
  const matchesPrint = useMediaQuery("print");
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      {matchesPrint && <h2>This should only show for printing.</h2>}
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

因此，对于Firefox，您需要类似oisti的方法。

Answer 3

据我所知，您需要使用样式：

添加此人：

<style type="text/css" media="print">
  .no-print {
    display: none;
  }
</style>

在您不想打印的东西上使用“不打印”样式