title: Using createMuiTheme to override default styles on div's, p's, body
body: <p>This is perhaps a simple Material UI Theme Customization question.</p>
  
  <p>What I want to do is to override the default styling on <code>&lt;body&gt;</code> (and other common tags in the future). Right now at the root of my React tree: </p>
  
  <pre><code>import theme from './mui-theme'
  
  
  ReactDOM.render(
    &lt;Router&gt;
      &lt;ThemeProvider theme={theme}&gt;
        &lt;StylesProvider injectFirst&gt;
          {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
          &lt;CssBaseline /&gt;
          &lt;App /&gt;
        &lt;/StylesProvider&gt;
      &lt;/ThemeProvider&gt;
    &lt;/Router&gt;,
    document.getElementById('root'),
  );
  </code></pre>
  
  <p>There's a theme that specifies some things but leaves out <code>'body1'</code> </p>
  
  <p><code>const theme = useTheme()</code> and <code>console.log(theme)</code> shows that it is defined as:</p>
  
  <pre><code>typography:
    body1:
      fontFamily: "Roboto,"Helvetica Neue""
      fontSize: "1rem"
      fontWeight: 400
      lineHeight: 1.5
  </code></pre>
  
  <p>This is the setting I want. However to use that setting I have to use the <code>Typography</code> tag with <code>variant='body1'</code>. Otherwise, text inside a <code>div</code> has styling provided by <code>CssBaseline</code>. That's the rule on the <code>body</code> tag: <code>font-size: .875rem;</code> which I wish to override.</p>
  
  <p>Do people override styling provided by CssBaseline by using createMuiTheme? If so, I added:</p>
  
  <pre><code>body: {
      fontSize: '1rem',
    },
  </code></pre>
  
  <p>Which shows up on <code>console.log(theme)</code>, but how tell the <code>&lt;body&gt;</code> tag to actually use that style?</p>