title: Material-ui is not working as intended
body: <p>I'm new to React material-ui. I used their guide and created simple Appbar (same as theirs). However, my appbar looks different than theirs:</p>
  
  <p>My Appbar:</p>
  
  <p><a href="https://i.stack.imgur.com/8LKEO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8LKEO.png" alt="enter image description here"></a></p>
  
  <p>It should've looked like this:</p>
  
  <p><a href="https://codesandbox.io/s/m3m1x5qxw8" rel="nofollow noreferrer">https://codesandbox.io/s/m3m1x5qxw8</a></p>
  
  <ul>
  <li><p>I have installed <code>npm install @material-ui/core</code></p></li>
  <li><p>I have added Roboto fonts to my index.html in the head part.<a href="https://i.stack.imgur.com/c6kva.png" rel="nofollow noreferrer">Here is a screenshot of my index.html</a></p></li>
  </ul>
  
  <p>My code is literally same as their code, only changed the function name. However, this AppBar is located under this:</p>
  
  <pre><code>&lt;div&gt; // it is the root div
                      &lt;Header2/&gt; // the appbar
  </code></pre>
  
  <p>Their color is not the same, their font is not the same.</p>
  
  <p>What did I do wrong?</p>