Changing style on <body> element
<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>