How to Create a Style Element and Append to Head in React

How can I create a style element and append to head in React?

Welcome to React!

It's true that in react-land there are best practices that people will push onto you like styled-components, glamorous, styled-jsx, inline, etc. And I would even recommend those.

The great part about Reactjs is that vanilla javascript can be used. That same snippet of code can be used in the lifecycle componentDidMount

componentDidMount() {
  const $style = document.createElement("style");
  document.head.appendChild($style);
  const randBlue = ~~(Math.random() * 250);
  $style.innerHTML = `body { color: rgb(10, 10, ${randBlue}); }`;
}

Or you can even target the body's inline styles like so:

componentDidMount() {
  const randBlue = ~~(Math.random() * 250);
  document.body.style.color = `rgb(10, 10, ${randBlue})`;
}

UPDATED for React Hooks:

Put this at at the beginning of your functional component

useEffect(() => {
  const randBlue = ~~(Math.random() * 250);
  document.body.style.color = `rgb(10, 10, ${randBlue})`;
}, []);

How to create a style tag with Javascript?

Try adding the style element to the head rather than the body.

This was tested in IE (7-9), Firefox, Opera and Chrome:

var css = 'h1 { background: red; }',
    head = document.head || document.getElementsByTagName('head')[0],
    style = document.createElement('style');

head.appendChild(style);

style.type = 'text/css';
if (style.styleSheet){
  // This is required for IE8 and below.
  style.styleSheet.cssText = css;
} else {
  style.appendChild(document.createTextNode(css));
}

How do I append a string containing a style tag as-is to the document head with vanilla js?

Use document.createElement('div') then insert the string to it, get the DOM from that fragment so that it can be inserted to the <head> using appendChild:

var fragment = document.createElement('div');
// remove newlines from the string and insert it in the fragment
fragment.innerHTML = the_style_string.replace(/(\r\n|\n|\r)/gm, '');
document.head.appendChild(fragment.firstChild);

ReactJS makes head html tag visible on import css/sass in react element

I solved this problem myself. The problem was in _share.scss file. I just changed this:

$primaryColor: #1b224b;
$secondaryColor: #77c848;

* {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  align-self: center;
  margin-top: 20px;
  display: block;
}

To this:

$primaryColor: #1b224b;
$secondaryColor: #77c848;

* {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  align-self: center;
}

and now everything works, i think thak display: block style property was applying to <style> tag too, because of the class was *

Trying to use React.DOM to set body styles

Assuming your body tag isn't part of another React component, just change it as usual:

document.body.style.backgroundColor = "green";
//elsewhere..
return (
  <div>
    Stuff goes here.
  </div>
);

It's recommended to put it at componentWillMount method, and cancel it at componentWillUnmount:

componentWillMount: function(){
    document.body.style.backgroundColor = "green";
}

componentWillUnmount: function(){
    document.body.style.backgroundColor = null;
}

How can I add style to the body element with JSS?

You can use the syntax introduced by jss-plugin-global

  '@global': {
    body: {...}
  }

Also recommend creating a separate component for this and wrap your component with it. Otherwise your specific component becomes less reusable.