title: React component size changes in print window
body: <p>So this is my problem, I am trying to print some components in React using <code>window.print</code>, my components have defined sizes say 5cm x 5cm, I have hidden all other components in the print page (note that the styling of the whole page is somehow complex to post here), the problem is that my components get resized when on the print page. I have looked a lot but nothing has worked for me.
  Note that when I tested the same print in a different page (with no complex styling) it worked fine. So is there any way to pass the styles to the print window or &quot;Override&quot; the styling so that my components get rendered correctly?
  Thanks.</p>
  <p>EDIT: Here is my CSS. This is working fine in a fresh app so there must be something I used messing things up, I removed all <code>@media print</code> from Bootstrap CSS files but no luck.
  I tried to put the code inside as well as outside the <code>@media print</code> but no luck as well.
  As far as I know <code>media</code> should render real physical lengths and units, any help would be appreciated.
  Thanks again</p>
  <pre class="lang-css prettyprint-override"><code>.print-only {
    display: none;
  }
  
  @media print {
    @page {
      margin: 0;
      size: a4 !important;
    }
    body {
      margin: 0.5cm !important;
      padding: 0;
    }
  
    .print-only {
      margin-top: 20px;
      display: block;
    }
  
    .no-print {
      width: 100%;
      margin: 0px;
      display: none;
    }
  
    .Container {
      position: relative;
      display: block;
      border: 3px solid black;
      width: 6in !important;
      height: 2in !important;
      margin: 0;
      padding: 0;
      text-align: start;
    }
  
    .labels {
      font-family: Arial, &quot;Helvetica Neue&quot;, Helvetica, sans-serif;
      font-size: 6pt;
      font-style: normal;
      font-variant: normal;
      height: 13px;
    }
  
    .container2 {
      height: 39px;
      font-size: 8px;
      font-weight: 550;
      position: absolute;
      top: 20px;
      right: 1in;
      line-height: 13px;
      text-align: center;
    }
  }
  </code></pre>