javascript - Material-UI - 如何在 AppBar 上渲染一些东西？

Question

我正在使用 Material-UI 框架开发一个 React Web 应用程序。我现在已经到了想要在 AppBar 上渲染一些东西的地步，但是来自不同的文件。

我的应用程序结构如下：

Main.js - 包含 AppBar 和 react-router

react-router 作为 Main.js 的子项加载的各种视图或“页面”

这些页面呈现的各种组件。

您可以在下面看到我想要实现的目标。

如果有帮助，这里是 AppBar 的代码，请注意；我也尝试过“静态”位置。

<AppBar position="fixed">
                <Toolbar>
                    <IconButton
                        edge="start"
                        className={classes.menuButton}
                        color="inherit"
                        aria-label="menu"
                        onClick={handleClick}>
                        <MenuIcon/>
                    </IconButton>
                    <Typography variant="h4" className={classes.title}>
                      <Link href="/" variant="h4" color="inherit">Site Name</Link>
                    </Typography>
                </Toolbar>
                <div>
                    <Menu
                        id="Menu"
                        anchorEl={anchorEl}
                        keepMounted
                        open={Boolean(anchorEl)}
                        onClose={handleClose}>
                        <MenuItem onClick={handleClose}>
                        // SOME MENU ITEM
                        </MenuItem>
                    </Menu>
                </div>
            </AppBar>

以及我试图呈现小部件的页面。现在我只是使用 Typography 组件作为占位符。我的理解是，我需要设置包含此小部件的 div 的 Z 索引以提升它，但是，我假设它仅与此视图中的其他组件相关，而不是来自 AppBar别处？

<div>
            <div
                style={{
                height: 20,
                backgroundColor: "yellow",
                position: "relative",
                zIndex: 10
            }}>
                <Typography component="h3" variant="h3">Widget Placeholder</Typography>
            </div>

            <Toolbar></Toolbar> // Empty toolbar is used to push all the other content down below the AppBar when it's position is set to fixed
// other content from this page
</div>  

代码沙箱：https ://codesandbox.io/s/goofy-feather-cf1kd?file=/src/App.js

谢谢 ：）

标签： javascriptreactjsmaterial-ui