title: React how to print landscape / portrait for different components
body: <p>Our React app has ~10 different routes and we'd like for them all to be printable. We're using the css print media query to clean styles up for print, and the frontend has a button that calls <code>window.print()</code> on click.</p>
  <p>Amongst the 10 routes, 7 of the pages look better with <code>landscape</code> whereas the other 3 are better as <code>portrait</code>. Currently, <code>@page</code> is only set once, in the app's top-level <code>App.scss</code> file.</p>
  <p><strong>App.scss</strong></p>
  <pre><code>@page {
    size: portrait;
  }
  
  @media print and (orientation: portrait) {
    .table-cols {
        max-width: 50%;
    }
  
    .my-selects { display: none; }
    .my-print-button { display: none; }
    .my-footer { display: none; }
    ...
  }
  </code></pre>
  <p>How (if at all) can the <code>@page { size: portrait }</code> be switched to landscape certain routes, depending on the route? Maybe a <code>landscape</code> class and a <code>portrait</code> class could be made, that each set their own <code>@page</code> value, and then the classes would be used on the elements the routes are returning?</p>