reactjs - 为什么有两个滚动应用栏需要在 Material-UI 示例文档中正确呈现的组件？

Question

我试图更好地理解 Material-UI 的工作原理，但我很困惑为什么我需要使用 Toolbar 组件两次才能让滚动工具栏正确呈现，如本示例代码所示。

如果我没有在 ElevationScroll 之后包含第二个工具栏，我想放置在应用栏下方的菜单将呈现在应用栏下方。如果我包含它，我的菜单会被按下并很好地呈现。这很好用，但我不明白为什么我需要在我的 jsx 中包含一个额外的东西才能让事情看起来正确，就像在这个简化的例子中一样：

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

我在 Google Devtools 中检查了为什么会发生这种情况，第二个工具栏呈现为具有几乎相同的 css 样式但没有子元素的 div。当我在 Devtools 中手动删除它时，菜单会像以前一样被推回到应用栏后面。谢谢你的帮助！

标签： reactjsmaterial-uimaterial-components

Answer 1

这是因为 AppBar 具有positon: fixed;这意味着它不会占用屏幕上的空间，因此您需要在 AppBar 下方使用另一个工具栏来将内容向下推送并占用工具栏应占用的相同空间。