title: How to render a React component styled with Emotion in an iframe in Gatsby site?
body: <p>I work on a component library and a demo site.</p>
  
  <p>Components are styled using <a href="https://emotion.sh/" rel="nofollow noreferrer">Emotion</a> and the demo site is built with <a href="https://www.gatsbyjs.org/" rel="nofollow noreferrer">Gatsby</a>.</p>
  
  <p>For preview purposes, I'd like to render components in an iframe. This will ensure that styles from the website are not cascading to the components, make it easier to deal with responsive layouts, etc.</p>
  
  <p>I'd also like to preserve hot-reloading inside the iframe.</p>
  
  <p><a href="https://codesandbox.io/s/gatsby-starter-default-jw5u5" rel="nofollow noreferrer">Here</a>, you can see an example of how <code>line-height</code> from the website is cascading to the <code>Button</code> component causing it to be very tall.</p>
  
  <p><a href="https://i.stack.imgur.com/bXK6q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bXK6q.png" alt="enter image description here"></a></p>
  
  <p>How could I render the <code>Button</code> with all its styles inside the iframe?</p>