title: Change root background color with Material-UI theme
body: <p>I'm trying something very simple: building two themes for a website using Material-UI themes:</p>
  <p>A <code>light</code> theme and <code>dark</code> one, but it does not work well: the theme is on every Material-UI react element, but the root element on the html document keeps having the same default white background.</p>
  <p>Of course it can be changed by attacking the body with pure .css:</p>
  <pre class="lang-css prettyprint-override"><code>body {
    background-color: #222;
  }
  </code></pre>
  <p>But I was looking to change it dynamically with React, I though this would work, but it does not:</p>
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import App from './App';
  import { ThemeProvider } from '@material-ui/styles';
  import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
  
  const themeLight = createMuiTheme({
    palette: {
      background: {
        default: &quot;#e4f0e2&quot;
      }
    },
  });
  
  const themeDark = createMuiTheme({
    palette: {
      background: {
        default: &quot;#222222&quot;,
      }
    },
  });
  
  ReactDOM.render(
    &lt;MuiThemeProvider theme = { themeDark }&gt;
      &lt;App /&gt;
    &lt;/MuiThemeProvider&gt;, document.getElementById('root'));
  </code></pre>
  <p>and I'm lost here, there is no way to make this with Material-UI theme?</p>