Почему window.print выдает дубликаты страниц? ⇐ CSS

[Anonymous]

Я пытаюсь напечатать модальное диалоговое окно в компоненте React. Когда компонент, находящийся под модальным окном, занимает более 1 страницы, печать модального окна дублируется для каждой страницы.

Поскольку элемент div, который я хочу напечатать, наложенные на другие элементы div, я использую библиотеку компонентов стиля, чтобы настроить свойства печати @media так, чтобы отображалась только цель печати. На странице у меня есть следующее:

Код: Выделить всё

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

и рендеринг содержит элемент .

Затем в модальном окне у меня есть:

Код: Выделить всё

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

@media print {
visibility: visible;
}
`;

и здесь модальное окно окружено элементом . Я попытался установить высоту основного контента на 0 пикселей, но это не дало никакого эффекта.

Подробнее здесь: https://stackoverflow.com/questions/574 ... cate-pages