title: Creating a navbar with Material-UI
body: <p>I'm trying to create a simple navbar with Material-UI that looks like the one they use on <a href="https://mui.com/components/app-bar" rel="nofollow noreferrer">their site</a>. This is the code I wrote to try to replicate it:</p>
  <pre><code>import React from 'react'
  import {AppBar, Tabs, Tab} from 'material-ui'
  
  class Nav extends React.Component {
    render() {
      return (
        &lt;AppBar title=&quot;My App&quot;&gt;
          &lt;Tabs&gt;
            &lt;Tab label=&quot;Item 1&quot; /&gt;
            &lt;Tab label=&quot;Item 2&quot; /&gt;
            &lt;Tab label=&quot;Item 3&quot; /&gt;
            &lt;Tab label=&quot;Item 4&quot; /&gt;
          &lt;/Tabs&gt;
        &lt;/AppBar&gt;
      )
    }
  }
  
  React.render(&lt;Nav /&gt;, document.body)
  </code></pre>
  <p>The problem is, the tabs are coming up very weird and clicking on the tabs have no effect whatsoever. Screenshot:</p>
  <p><a href="https://i.stack.imgur.com/mRxKc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mRxKc.png" alt="enter image description here" /></a></p>