title: how to use styled components to style the printing of a component?
body: <p>I am trying to control the size/orientation when printing a component using styled-components. My question is: how can I use the @page CSS at-rule, or another method to style the printing component, with styled components?</p>
  
  <p>CSS @page documentation:</p>
  
  <p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@page" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/@page</a></p>
  
  <p>I have tried:</p>
  
  <pre><code>const PrintSchedulesContainer = styled.div`
    display: none;
    @media print and (min-width: 480px) {
      padding: none;
      margin: none;
    }
  `;
  </code></pre>
  
  <p>And:</p>
  
  <pre><code>const PrintSchedulesContainer = styled.div`
    display: none;
    @page {
      size: landscape;
    }
  `;
  </code></pre>