title: client rendering react component to html in browser client side with styles
body: <p>I have a development requirement, I need to render the React component in the client browser, generate it to html string and send it to the backend's puppeteer headless browser, puppeteer convert the html to a pdf file and send it back to the front end for printing or other purpose. So I must distill or collect the styles and send it with the html string. For some reason, all the render work must be down in client side.</p>
  
  <p>I noticed styled-components have an api have server render ability . And it also have some trick to do it in client.</p>
  
  <pre><code>const {StyleSheet} = require('styled-components').__DO_NOT_USE_OR_YOU_WILL_BE_HAUNTED_BY_SPOOKY_GHOSTS
  StyleSheet.reset(true)
  </code></pre>
  
  <p>But it also have a warning it is not encouraged to use it in frontend, and may cause some ghost problem.</p>
  
  <p>I need a solution to render react component to html with styles in browser client side.</p>