Css 为什么window.print提供重复页面？

我正在尝试打印React组件中的模式对话框。当模式下的组件占用超过1页时，将为每页复制模式的打印

由于要打印的div覆盖在其他div上，因此我使用样式组件库将@media print属性设置为仅显示打印目标。在页面中，我有以下内容：

const NoPrintBody = createGlobalStyle`
  @media print {
    html, body {
      visibility: hidden;
    }
  }
`;

渲染包含元素

然后，在模态中，我有：

const ReportContainer = styled.div`
  display: flex;
  flex-direction: column;
  height: 100%;

  @media print {
    visibility: visible;
  }
`;

---

这里模态被元素包围。我已尝试将基础内容的高度设置为0px，但没有任何影响。

您的全局样式更新正确吗？您应该能够在页面的某个地方找到css

我认为NoPrintBody不起作用，因为它是针对html标记的——即使你的模态也应该是它的子对象

---

您是否在没有媒体打印的情况下尝试过它？如果你能让它在浏览器中显示你想要的样子，你应该能够将它添加回去，让它以你想要的方式打印

我确信全局样式正在正确更新，因为如果没有它，底层页面和菜单等其他东西会显示在打印上。你明白了吗？我也有同样的问题。我的打印媒体查询将目标div的位置设置为固定，将宽度和高度设置为100vw/h，以仅覆盖整个页面。但是现在当调用window.print（）时，我在“打印视图”中得到了两个页面。我们最终没有使用模式（通过导航到新路径（使用React））。啊..我也发现了这一点。我找不到我的评论，所以我可以编辑它。在打印媒体查询中使用

display:fixed

时，我得到了重复的评论。