Search code examples
reactjsmaterial-uimaterial-components

Why are there two <Toolbar/> components needed to render correctly in the Material-UI example documentation for scrolling app bars?

I'm trying to better understand how Material-UI works, and I was confused why I need to use the Toolbar component twice to get my scrolling toolbar to render properly as in this example code.

If I don't include the second Toolbar after the ElevationScroll, the menu I want to place below the app bar is rendered underneath the app bar. If I include it, my menu is pushed down and renders nicely. This works great, but I don't understand why I need to include an extra in my jsx in order to get things to look right, like in this simplified example:

function SettingsMenu() {
  return (
    <ElevationScroll>
      <AppBar>
        <Toolbar>
          <Typography>
            Settings
          </Typography>
        </Toolbar>
      </AppBar>
    </ElevationScroll>
    <Toolbar/>
    <MyMenu/>
  );
}

I've checked in Google Devtools to figure out why this is happening, the second toolbar is rendered as a div with nearly identical css styles but with no child elements. When I delete it manually in Devtools, the menu gets pushed back up behind the app bar as before. Thanks for any help!

Solution

  • It's because AppBar have positon: fixed; which means it wont take space on the screen so you but another Toolbar which will be underneath the AppBar to push the content down and take the same space the Toolbar should take.