title: Understanding App Bar component from React mui-org material-ui
body: <p>I am learning React and using Material UI. I downloaded dashboard template from <a href="https://github.com/mui-org/material-ui/tree/master/docs/src/pages/getting-started/templates/dashboard" rel="nofollow noreferrer">https://github.com/mui-org/material-ui/tree/master/docs/src/pages/getting-started/templates/dashboard</a></p>
  <p>In Dashboard.js file in the template, I am trying to understand below code.</p>
  <pre><code>const AppBar = styled(MuiAppBar, {
    shouldForwardProp: (prop) =&gt; prop !== &quot;open&quot;,
  })(({ theme, open }) =&gt; ({
    zIndex: theme.zIndex.drawer + 1,
    transition: theme.transitions.create([&quot;width&quot;, &quot;margin&quot;], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen,
    }),
    ...(open &amp;&amp; {
      marginLeft: drawerWidth,
      width: `calc(100% - ${drawerWidth}px)`,
      transition: theme.transitions.create([&quot;width&quot;, &quot;margin&quot;], {
        easing: theme.transitions.easing.sharp,
        duration: theme.transitions.duration.enteringScreen,
      }),
    }),
  }));
  </code></pre>
  <p>I have very basic knowledge of React and JavaScript in general and really struggling with what going on in above code. All these brackets and curly braces are very confusing. Any help is highly appreciated.</p>