title: Changing style on <body> element
body: <p>I am new to React so this may be simple but I cannot for the life of me find anything in the docs because the  element is outside the ReactDOM.</p>
  
  <p>I am using material-ui for the user interface and that provides two themes: <code>lightBaseTheme</code> (the default) and <code>darkBaseTheme</code> with darker colors. Sort of day and night modes. The problem is that neither apply any styling to the <code>&lt;body&gt;</code> so the page background does not follow the theme. The dark theme uses white text which does not show on the default white background.</p>
  
  <p>I suspect that I need to find a programmatic solution and set the  background color based on the currently loaded theme.</p>
  
  <p>But how? I have tried putting code in the componentDidUpdate method of the top level component but that seems to always return the light theme. In any case I am not sure it is good practice to directly write to the DOM even though the <code>body</code> element is outside anything that is going to be affected by React.</p>
  
  <pre><code>export default class app extends React.Component {
  
      componentDidUpdate () {
          const muiTheme = getMuiTheme();
          const canvasColor = muiTheme.palette.canvasColor;
          document.body.style.backgroundColor = canvasColor;
      }
  
      render () {
          const muiTheme = getMuiTheme();
          return (
              &lt;MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme)}&gt;
                  &lt;span&gt;Rest of the app goes here&lt;/span&gt;
              &lt;/MuiThemeProvider&gt;
          );
      }
  };
  </code></pre>
  
  <p>The call to getMuiTheme in componentDidUpdate always returns lightBaseTheme even after it has been set in the render call.</p>
  
  <p>I should perhaps add that the ultimate intention is to be able to change the theme on-the-fly so directly styling the <code>&lt;body</code> element is not an option.</p>