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

Question

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

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

我是否可以添加纯CSS，或者React样式表是否支持@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>