Почему в примере документации Material-UI для прокрутки панелей приложений необходимы два компонента <Toolbar />?

Question

Я пытаюсь лучше понять, как работает Material-UI, и я был озадачен, почему мне нужно дважды использовать компонент панели инструментов, чтобы заставить мою прокручиваемую панель инструментов отображаться правильно, как в этом примере кода .

Если я не включаю вторую панель инструментов после ElevationScroll, то меню, которое я хочу разместить под панелью приложения, отображается под панелью приложения.Если я включу его, мое меню будет сдвинуто вниз и будет красиво отображаться.Это прекрасно работает, но я не понимаю, почему мне нужно добавить дополнительный в jsx, чтобы все выглядело правильно, как в этом упрощенном примере:

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

Я проверил в GoogleЧтобы понять, почему это происходит, вторая панель инструментов отображается как div с почти идентичными стилями CSS, но без дочерних элементов.Когда я удаляю его вручную в Devtools, меню, как и раньше, отодвигается за панель приложения.Спасибо за любую помощь!

Answer 1

Это потому, что в AppBar есть positon: fixed;, что означает, что он не займет места на экране, поэтому вам нужна только другая панель инструментов, которая будет находиться под панелью приложений, чтобы сдвинуть содержимое вниз и занять то же пространство, которое должна занимать панель инструментов.