这是因为MaterialUI应用程序栏默认为position="fixed"。这将其与标准DOM的布局分开，以允许内容在其下方滚动，但结果是页面上没有为它留出空间。
您可以通过将其下面的所有内容 Package 在div中并指定足够的边距来解决此问题，或者通过更改<AppBar>的position属性使其不再是"fixed"。在您的示例中，如果<AppBar>下面只有<Box>内容，您也可以将样式应用于<Box>。
例如

import React from 'react';
import { AppBar, Typography, Box } from '@material-ui/core';

function App() {
    return (
        <div>
            <AppBar>
                <Typography variant='h3'>
                    AppBar
                </Typography>
            </AppBar>
            <div style={{marginTop: 80}}>
                <Box>
                    <Typography variant='h1' style={{ border: '1px solid black' }}>
                        Hello
                    </Typography>
                </Box>
            </div>
        </div>
    )
}

export default App;

MaterialUI为AppBar提供了一个主题mixin，可以提供帮助。不确定你是否在使用推荐的JSS设置，但你可以这样做：

import withStyles from '@material-ui/core/styles/withStyles';
const styles = theme => ({
  appBarSpacer: theme.mixins.toolbar
});

const style = withStyles(styles)

function MyScreen ({ classes }) {
  <AppBar></AppBar>
    <div className={classes.appBarSpacer}></div>
  <Box></Box>
}

export default style(MyScreen)

mixin将给予div与AppBar相同的高度，并将其他内容向下推。

根据Material-ui，这个问题有三种解决方案。
https://material-ui.com/components/app-bar/#fixed-placement
1.你可以使用position=“sticky”代替fixed。IE️ 11不支持粘性过滤。
1.您可以渲染第二个组件
1.你可以使用theme.mixins.toolbar CSS
我个人喜欢使用第二种解决方案。

return (
    <>
      <AppBar position="fixed">
        <Toolbar>{/* content */}</Toolbar>
      </AppBar>
      <Toolbar />
    </>
  );

<AppBar position='static'>
使用这个它会这样做，内容不会隐藏在出现

我认为有一个良好的应用程序设置是固执己见，但我会建议以下

import React from "react";
import ReactDOM from "react-dom";
import {
  AppBar,
  Typography,
  Box,
  CssBaseline,
  makeStyles,
  Container,
  Grid,
  Toolbar
} from "@material-ui/core";

const useStyles = makeStyles(theme => ({
  content: {
    flexGrow: 1,
    height: "100vh",
    overflow: "auto"
  },
  appBarSpacer: theme.mixins.toolbar,
  title: {
    flexGrow: 1
  },
  container: {
    paddingTop: theme.spacing(4),
    paddingBottom: theme.spacing(4)
  }
}));

function App() {
  const classes = useStyles();
  return (
    <div className={classes.root}>
      <CssBaseline />
      <AppBar position="absolute">
        <Toolbar className={classes.toolbar}>
          <Typography
            component="h1"
            variant="h6"
            color="inherit"
            noWrap
            className={classes.title}
          >
            AppBar
          </Typography>
        </Toolbar>
      </AppBar>
      <main className={classes.content}>
        <div className={classes.appBarSpacer} />
        <Container maxWidth="lg" className={classes.container}>
          <Grid container spacing={3}>
            <Grid item xs={12}>
              <Box>
                <Typography variant="h1" style={{ border: "1px solid black" }}>
                  Hello
                </Typography>
              </Box>
            </Grid>
          </Grid>
        </Container>
      </main>
    </div>
  );
}

试试这个！

const useStyles = makeStyles((theme) => ({
root: {
    flexGrow: 1,
    [theme.breakpoints.down('sm')]: {
        marginBottom: 56,
    },
    [theme.breakpoints.up('sm')]: {
        marginBottom: 64,
    },
},
menuButton: {
    marginRight: theme.spacing(1),
},
title: {
    flexGrow: 1,
}, }))

您可以像这样将上述内容添加到代码中

const Navbar = () => {
const classes = useStyles()
return (
    <div className={classes.root}>
        <AppBar position='fixed' color='primary'>
            <Toolbar>
                <IconButton
                    edge='start'
                    className={classes.menuButton}
                    color='inherit'
                    aria-label='menu'>
                    <MenuIcon />
                </IconButton>
                <Typography variant='h6' className={classes.title}>
                    News
                </Typography>
                <Button color='inherit'>Login</Button>
            </Toolbar>
        </AppBar>
    </div>
)}

有关更多文档，请访问material-ui断点自定义

最短的技巧可以给位置作为粘性的Appbar。作为参考，你可以看到下面的附加图像！
enter image description here

我在我的Vite-React应用程序中使用了MUI ResponsiveAppBar组件，并尝试了这里所说的所有内容来更改栏的属性，但没有成功，因为栏在每个页面上呈现，并且不“知道”在特定页面上呈现的其他组件。我的解决方案是在index.css中添加一个css类，如下所示：

.content-container {
margin-top: 80px;
}

然后将该类作为属性添加到每个页面中，以使div呈现其余组件。例如在主页中：

import React from "react";

function HomePage() {
    return (
        <div className="content-container">
            <h1>Home Page of App</h1>
        </div>
    )
}

export default HomePage

这将在页面的顶部创建一个边距（您可以指定），以便应用栏不会“覆盖”页面上的其他内容。从我检查的内容来看，它不应该以任何方式影响应用程序的响应特性。