How to force page break to a new page #324
Description
Hi,
Im trying to use useReactToPrint() hook to pass the ref into my class-based child component.
In my child component, i've tried to use page-breaking dynamic react content as written on your document, but the element still didn't force to break onto the new page. I'm using module css here to refer styles in my childComponent. Can someone please help me find where the mistakes was? Thank you
Child.jsx
...
<Grid container ref={this.props.ref} className={styles.root}>
<>
<div className={styles["page-break"]} />
<Grid item container>
//Code for page 1
</Grid>
</>
<>
<div className={styles["page-break"]} />
<Grid item container>
//This should've been printed in a new page
</Grid>
</>
</Grid>
//...child.module.css
.root {
margin: 0;
padding: 0
}
@media all {
.page-break {
display: none;
}
}
@media print {
html,
body {
height: initial !important;
overflow: initial !important;
-webkit-print-color-adjust: exact;
}
}
@media print {
.page-break {
margin-top: 1rem;
display: block;
page-break-after: always;
}
}
@page {
size: auto;
margin: 20mm;
}