title: How can I use page break in react-to-print?
body: <p>I have a requirement to turn some print a page which is created using Material UI react components. It's working well and I'm able to go to the print screen. The document I need to get printed goes to 2 pages. I need to break from a component and start printing it from 2nd page.</p>
  
  <p>Here's my style code for the component I've used to break the page. I'm using Material-ui <strong>withStyles</strong> to inject the styles to the component.</p>
  
  <pre><code> print: {
      '@media print': {
        display: 'block',
        pageBreakBefore: 'always',
      },
    },
  </code></pre>
  
  <p>And here's the components I need to get printed.</p>
  
  <pre><code>&lt;div className={classes.body}&gt;
      &lt;Grid container&gt;
        &lt;Grid item xs={12} className={classes.root}&gt;
          &lt;Typography variant="h3" className={classes.title}&gt;
            &lt;FormattedMessage {...messages.types} /&gt;
          &lt;/Typography&gt;
          &lt;Typography
            className={classes.caption}
            variant="body2"
            component="span"
          &gt;
            {`(${this.type()} Type - ${data.type})`}
          &lt;/Typography&gt;
        &lt;/Grid&gt;
        &lt;Grid container spacing={2}&gt;
          {this.renderContentOne()}
          &lt;Grid item xs={12} className={`${classes.root} ${classes.print}`}&gt;
            &lt;Portlet&gt;
              &lt;PortletHeader&gt;
                &lt;Grid item&gt;
                  &lt;Typography variant="subtitle2"&gt;
                    {intl.formatMessage({
                      ...messages.details,
                    })}
                  &lt;/Typography&gt;
                &lt;/Grid&gt;
              &lt;/PortletHeader&gt;
              &lt;PortletContent&gt;
                &lt;Fragment&gt;{this.renderDetailContent()}&lt;/Fragment&gt;
              &lt;/PortletContent&gt;
            &lt;/Portlet&gt;
          &lt;/Grid&gt;
        &lt;/Grid&gt;
      &lt;/Grid&gt;
  &lt;/div&gt;
  );
  </code></pre>
  
  <p>After the <code>renderContentOne</code> returns the content I need the next component to started printing in a new page. So, the page-break-before style doesn't seems to work. Is there anyway I can make this work ? Or else any other suitable library I can use ?  Any help would be greatly appreciated.
  Thanks in advance</p>