title: AppBar overlaps with other elements
body: <p>I am starting to use React/Material-UI, and also new to CSS etc...
  I have a simple page layout with an APPBar. Unfortunately this AppBar overlaps the elements which are meant to go below it.</p>
  
  <p>I have found this answer:
  <a href="https://stackoverflow.com/questions/50992733/appbar-material-ui-questions">AppBar Material UI questions</a></p>
  
  <p>But this feels completely wrong. What if my AppBar has a variable height, depending on the icons, display modes etc...?</p>
  
  <p>I have tried to create a vertical grid, to wrap the elements in different items, made the top container a flex one and play with flex settings, nothing seems to work, the app bar always sits on top of the text.</p>
  
  <p>The code is very simple:</p>
  
  <pre><code>import React from 'react';
  import { AppBar, Typography, Box } from '@material-ui/core';
  
  function App() {
      return (
          &lt;div&gt;
              &lt;AppBar&gt;
                  &lt;Typography variant='h3'&gt;
                      AppBar
                  &lt;/Typography&gt;
              &lt;/AppBar&gt;
              &lt;Box&gt;
                  &lt;Typography variant='h1' style={{ border: '1px solid black' }}&gt;
                      Hello
                  &lt;/Typography&gt;
              &lt;/Box&gt;
          &lt;/div&gt;
      )
  }
  
  export default App;
  </code></pre>
  
  <p>The "Hello" text chunk is only half visible:</p>
  
  <p><a href="https://i.stack.imgur.com/iOAP6.png" rel="noreferrer"><img src="https://i.stack.imgur.com/iOAP6.png" alt="enter image description here"></a></p>