使用react使用@media Print只打印一个元素

Question

我有一个小的拖放游戏，这个游戏有一个如何玩的按钮，可以打开一个带有文本和指南的模式，当我点击打印(真实打印(时，我只想显示一个元素，而不想显示其他元素。那就是我需要你帮助的地方。

我试着用CSS做这个：

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

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

如果我打开模态(点击howtoplay按钮(，我会做对，但我的任务是在不点击该按钮的情况下完成。

感谢

Answer 1

你在隐藏尸体。模态窗口元素在主体中，所以它也被隐藏了。

尝试隐藏除模式窗口之外的所有内容

body *{
    visibility:hidden;
}
body .modal-window {
    visibility: visible;
}