使用 @media print 使用 react 仅打印一个元素答案

【问题标题】：Print only one element with @media print using react使用 @media print 使用 react 仅打印一个元素
【发布时间】：2021-12-31 11:30:53
【问题描述】：

我正在玩一个拖放游戏，这个游戏有一个操作方法按钮，当我点击打印时，它会打开一个带有文本和指南的模式，我只想显示那一个元素仅此而已。这就是我需要你帮助的地方。

我尝试用 CSS 来做到这一点：

@media print {
  body {
    visibility: hidden;
  }
  .modal-window {
    visibility: visible;
  }
}

认为这会有所帮助，但这只会显示一个空白页面，不知何故，我只需要打印我的 Modal.js 元素，该元素有一个带有 .modal-window 类的 div。

如果我打开模式（点击howtoplay按钮）我做对了，但我的任务是在不点击那个按钮的情况下做到这一点。

谢谢

【问题讨论】：

【解决方案1】：

你在隐藏身体。您的模态窗口元素在正文中，因此它也被隐藏了。

尝试隐藏正文中除模态窗口之外的所有内容

body *{
    visibility:hidden;
}

body .modal-window {
    visibility: visible;
}

【讨论】：