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

当打印预览发生时，我想隐藏一个div，但我发现在React中几乎不可能这样做

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

我是否可以添加纯css，或者React样式表是否支持@media print，并在打印预览时隐藏带有类名联系人的元素

我正在读这篇文章，但对于一些我在几秒钟内就会在css中做得很差的东西来说，这似乎太多了

---

知道如何在Reactjs中实现这样的功能吗？

在内联样式中不能使用媒体查询（也不能使用伪类和伪选择器）。您需要将css提取到一个单独的

.css

文件中，并将其导入组件文件中（如果您使用像webpack这样的捆绑包），或者仅将其包含在html中，而不允许使用

标记内联媒体查询。最接近的方法是内联样式表，如下所示（在React语法中）：

{`@媒体打印{.contacts{display:none；}}}`}

有点老了，但可能对某些人有用。如果要使用React样式，还可以执行以下操作：

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

const useStyles=makeStyles（（主题：主题）=>
创建样式({
联系人：{
显示：“块”，
},
[`@media print`]：{
联系人：{
显示：“无”，
},
}
}))
...
const classes=useStyles（）；
...

---

这个标记在

FunctionComponents

中完美地发挥了作用。

import./styles.css'？内联css如何？请参阅下面我的答案，以获取尽可能接近内联媒体查询的信息。我将接受这一答案，因为我正在使用typescript import./styles.css'进行开发；这似乎对我不起作用。
const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    contacts:{
      display: "block",
    },
    [`@media print`]: {
      contacts:{
        display: "none",
      },
    }
  }))
...
const classes = useStyles();
...
<div className={classes.contacts}></div>