为什么在滚动应用栏的 Material-UI 示例文档中需要两个 <Toolbar/> 组件才能正确呈现？

Question

我试图更好地理解 Material-UI 的工作原理，我很困惑为什么我需要两次使用 Toolbar 组件来让我的滚动工具栏正确呈现 this example code。

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

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

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

Answer 1

这是因为 AppBar 有 positon: fixed;，这意味着它不会在屏幕上占用 space，所以你只能在 AppBar 下方使用另一个工具栏来向下推内容并占用相同的 [=13] =] 工具栏应该带。

为什么在滚动应用栏的 Material-UI 示例文档中需要两个 <Toolbar/> 组件才能正确呈现？

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

reactjs

material-ui

material-components