title: How can I create a style element and append to head in React?
body: <p>I'm currently learning React, and (more importantly) attempting to learn how react actually works.</p>
  
  <p>I have some generated css which I would like to append to head as a style element.  In js land, this would be:</p>
  
  <pre><code>const $style = document.createElement("style");
  document.head.appendChild($style);
  const randBlue = ~~(Math.random() * 250);
  $style.innerHtml = `body { color: rgb(10, 10, ${randBlue}); }`;
  </code></pre>
  
  <p>Unfortunately, in React land, things appear to be a little less straightforward in this regard.  My understanding of this is that it is bad practice to append styles to head all willy nilly, because enough people doing it leads to problems.  I also recognize that most everybody uses styled-components, glamorous, styled-jsx, or inline for generated css because they circumvent a lot of issues that might come up from the aforementioned willy nillyness.</p>
  
  <p>But I don't want to use modules that I have no understanding of, and as far as I can tell, most of the above create style elements and append them to head somehow, and I would like to know how.</p>
  
  <p>So, if I'm in React and have some generated css text:</p>
  
  <pre><code>const randomColor = Math.random() &gt; 0.5 ? "red" : "blue";
  const generatedCss = `body { color: ${randomColor}; }`;
  </code></pre>
  
  <p>What goes in here?</p>
  
  <pre><code>createStyleElementAndAppendToHead(generatedCss) {
    // mystery code
  };
  </code></pre>