title: React style element descendant selector
body: <p>I want to use the direct descendant CSS selector in a React inline style element:</p>
  <pre class="lang-js prettyprint-override"><code> &lt;style&gt;{`
    .something&gt;div{
      color: blue;
    }
  `}&lt;/style&gt;
  </code></pre>
  <p>This is working fine on dev but in prod, React (un)helpfully converts the &gt; into a <code>gt;</code>, screwing up my CSS.</p>
  <p>How can I do a direct descendant in a React inline style element?</p>
  <p>Alternatively, how can I get React to treat the innerHTML as literal?</p>
  <p>I have a React app with multiple files and pages using Gatsby, which is notorious for not allowing multiple different CSS for different pages. I'm also using nested React components, so giving the nested components classes is not an option without modifying node_modules.</p>