如何在Reactjs Web应用程序中使用媒体打印

Question

我想在打印预览发生时隐藏div，但是我发现在React中几乎不可能做到这一点。

<div className="contacts"></div>

有没有可能添加纯CSS或在打印预览时React Stylesheet支持@media print并隐藏带有类名联系人的元素。

我正在阅读这篇文章https://blog.logrocket.com/the-best-react-inline-style-libraries-comparing-radium-aphrodite-emotion-849ef148c473，但这似乎对我做得不好的事情来说工作太多了在CSS中只需几秒钟。

知道如何在Reactjs中实现这种目标吗？

Answer 1

内联媒体查询是不可能的。您可以得到的最接近的是内联样式表，如下所示（在React语法中）：

<div className="contacts">
  <style>
    {`@media print {.contacts{display: none;}}`}
  </style>
</div>

Answer 2

有点旧，但也许对某人有用。如果你想使用 React 样式，你也可以这样做：

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    contacts:{
      display: "block",
    },
    [`@media print`]: {
      contacts:{
        display: "none",
      },
    }
  }))
...
const classes = useStyles();
...
<div className={classes.contacts}></div>

这个标记对我来说FunctionComponents完美无缺。