Reactjs 如何将一个组件设置为位于另一个组件下？

我正在使用React和Material UI设置一个小型Web应用程序，但我不知道如何使我的抽屉组件适合我的应用程序栏。使用react developer工具，我可以在控制台中看到我的组件正在获取类名，但无论我做什么，我的样式都不会应用于它们。目前，抽屉正在通过屏幕顶部的应用程序栏进行剪切，占据页面的整个高度，而不是安装在应用程序栏下。为了使我的“侧栏”组件适合我的“导航栏”组件，我需要更改什么？我之所以将这两个组件创建为单独的组件，其中一个原因是我计划在以后为它们添加更多功能。多谢各位

我一直在关注“应用程序栏下的剪辑”组件演示，我还参考了

这是我的一段代码

我的主应用程序

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';
import Navbar from './Navbar';
import Sidebar from './Sidebar';

const useStyles = makeStyles(theme => ({
  App: {
    display: 'flex',
  },
  navbar: {
    zIndex: theme.zIndex.drawer + 1,
  },
  drawer: {
    width: 240,
    flexShrink: 0,
  },
  toolbar: theme.mixins.toolbar,
}));

function App() {
  const classes = useStyles();

  return (
    <div className="App">
      <CssBaseline/>
      <Navbar position="fixed" className={classes.navbar}></Navbar>
      <Sidebar className={classes.drawer}></Sidebar>
    </div>
  );
}

export default App;

从“React”导入React；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/core/CssBaseline”导入CssBaseline；
从“/Navbar”导入导航栏；
从“./Sidebar”导入侧栏；
const useStyles=makeStyles（主题=>({
应用程序：{
显示：“flex”，
},
导航栏：{
zIndex:theme.zIndex.drawer+1，
},
出票人：{
宽度：240，
flexShrink:0，
},
工具栏：theme.mixins.toolbar，
}));
函数App（）{
const classes=useStyles（）；
返回(
);
}
导出默认应用程序；

我的导航栏组件

import React from 'react';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';

function Navbar() {
    return (
        <AppBar positon="static">
            <Toolbar>
                <h2>Earthquake Mapper</h2>
            </Toolbar>
        </AppBar>
    );
}

export default Navbar;

import React from 'react';
import Drawer from '@material-ui/core/Drawer';

function Sidebar() {

    return (
        <Drawer variant="permanent">
            <div>   
                <ul>
                    <li>This</li>
                    <li>Will</li>
                    <li>Be</li>
                    <li>Where</li>
                    <li>Our</li>
                    <li>Data</li>
                    <li>Go</li>
                </ul>
            </div>
        </Drawer>
    );
}

export default Sidebar;

从“React”导入React；
从“@material ui/core/AppBar”导入AppBar；
从“@material ui/core/Toolbar”导入工具栏；
函数Navbar（）{
返回(
地震制图仪
);
}
导出默认导航栏；

我的边栏组件

import React from 'react';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';

function Navbar() {
    return (
        <AppBar positon="static">
            <Toolbar>
                <h2>Earthquake Mapper</h2>
            </Toolbar>
        </AppBar>
    );
}

export default Navbar;

import React from 'react';
import Drawer from '@material-ui/core/Drawer';

function Sidebar() {

    return (
        <Drawer variant="permanent">
            <div>   
                <ul>
                    <li>This</li>
                    <li>Will</li>
                    <li>Be</li>
                    <li>Where</li>
                    <li>Our</li>
                    <li>Data</li>
                    <li>Go</li>
                </ul>
            </div>
        </Drawer>
    );
}

export default Sidebar;

从“React”导入React；
从“@material ui/core/Drawer”导入抽屉；
函数边栏（）{
返回(

这个
意志
是
在哪里
我们的
资料
去

);
}
导出默认边栏；

首先，将AppBar位置设置为“固定”

Material UI解决此问题的方法是将一个高度相等的空div添加到工具栏（您将其作为AppBar组件中的第一个子项，以便标题最小高度等于工具栏高度）作为抽屉组件的第一个子项

默认情况下，此高度为64px，但您应该从

theme.mixins.toolbar

获取此值。您可以在教程中看到这一点

所以你最终会做这样的事情：

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';

const useStyles = makeStyles(theme => ({
    toolbar: theme.mixins.toolbar,
}));

function Sidebar() {
    const classes = useStyles();

    return (
        <Drawer variant="permanent">
            <div className={classes.toolbar} />
            <div>   
                <ul>
                    <li>This</li>
                    <li>Will</li>
                    <li>Be</li>
                    <li>Where</li>
                    <li>Our</li>
                    <li>Data</li>
                    <li>Go</li>
                </ul>
            </div>
        </Drawer>
    );
}

export default Sidebar;

从“React”导入React；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/core/Drawer”导入抽屉；
const useStyles=makeStyles（主题=>({
工具栏：theme.mixins.toolbar，
}));
函数边栏（）{
const classes=useStyles（）；
返回(

这个
意志
是
在哪里
我们的
资料
去

);
}
导出默认边栏；

查看更多关于如何使用主题提供程序和自定义主题的信息

---

主题配置。

另一种选择是在抽屉中放置一个空的

，以填充空间

从“React”导入React；
从“@material ui/core/Drawer”导入抽屉；
从“@material ui/core/Toolbar”导入工具栏；
函数边栏（）{
返回(

这个
意志
是
在哪里
我们的
资料
去

);
}
导出默认边栏；

您是否收到任何错误？没有错误，控制台中没有弹出任何内容。我可以看到我的三个组件在react developer tools控制台中也被分配了正确的类名。感谢您的建议，我进行了建议的编辑，但没有任何更改。我是否需要通过道具将一些东西从应用程序组件传递到边栏组件？