材质 uI 组件未显示在 Grid 的底部

Question

我正在尝试创建一个包含卡片列表的页面。我设计了页面的页眉，但作为一个初学者，但我以自己的方式创建了它。

问题 是当我尝试在新的 Grid 容器中显示卡片时，它不会显示所需的结果。 这是我创建的头部图像

这是我尝试放置网格容器时的问题图片

我的风格和代码：

    import { AppBar, Avatar, Button, Card, CardActionArea, CardActions, CardContent, CardMedia, Grid, IconButton, makeStyles, Toolbar, Typography } from '@material-ui/core';
import React from 'react';
import MenuIcon from '@material-ui/icons/Menu';
import { Link } from 'react-router-dom';

const useStyles = makeStyles((theme) => ({

blackBox: {
    backgroundColor: 'black',
    height: '350px'
},
AppBar: {
    '&.MuiAppBar-positionFixed': {
        top: '60px',
        right: '126px',
        '@media (max-width: 576px)': {
            right: '42px'
        }
    },
    width: '85%',
},
large: {
    width: theme.spacing(10),
    height: theme.spacing(10),
},
link: {
    color: 'white',
    textDecoration: 'none',
    marginLeft: '30px',
    fontFamily: 'Times new roman'
},
headText: {
    marginTop: '130px',
    '@media (max-width: 576px)': {
        marginTop: '170px',
    }
},
title: {
    color: 'white',
    '@media (max-width: 576px)': {
        fontSize: '30px'
    }
},
titleDesc: {
    color: 'white',
    '@media (max-width: 576px)': {
        width: '235px'
    }
}

}))

export default function CoursesView() {
    const classes = useStyles();
    return (
        <>
            <Grid container
                direction="column"
                // justify="space-evenly"
                alignItems="center"
                className={classes.blackBox}
            >
                <Grid item >
                    <AppBar className={classes.AppBar} color='transparent'>
                        <Toolbar>
                            {/* <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
                                <MenuIcon />
                            </IconButton> */}
                            <div style={{ flexGrow: '1' }}>
                                <Avatar alt="Remy Sharp" src="https://seeklogo.com/images/F/forex-logo-6B4D0AB43E-seeklogo.com.png" className={classes.large} />
                            </div>
                        <Link to='/play' className={classes.link}>Home</Link>
                        <Link to='/play' className={classes.link}>Courses</Link>
                        <Link to='/play' className={classes.link}>The Trade Signal</Link>
                        <Link to='/play' className={classes.link}>About</Link>
                        <Link to='/play' className={classes.link}>My Account</Link>
                        <Link to='/play' className={classes.link}>My Crat</Link>
                    </Toolbar>
                </AppBar>
            </Grid>
            <Grid item container className={classes.headText} direction="column"
                justify="center"
                alignItems="center">
                <Typography variant="h2" className={classes.title}>
                    Courses
                </Typography>
                <Typography variant="p" className={classes.titleDesc}>
                    our uniqly designed  courses will help you in your specific areas of needs
                </Typography>

            </Grid>

        </Grid>
        <Grid container>
            <h1>The cards wil display Here</h1>
        </Grid>
    </>
)

}

enter code here

呈现此应用程序的主应用程序文件

    import React from "react";
import CourseListView from "./components/pages/CourseListView";
import VideoPlayView from "./components/pages/VideoPlayView";
import { Route, Switch } from "react-router-dom";
import { makeStyles, ThemeProvider } from "@material-ui/core/styles";
import { createMuiTheme } from '@material-ui/core';
import CoursesView from "./components/pages/CoursesView";

const useStyles = makeStyles({
  container: {
    display: "flex"
  }
});
const theme = createMuiTheme({
  palette: {
    primary: {
      main: "#333996",
      light: "#3c44b126"
    },
    secondary: {
      main: "#f83245",
      light: "#f8324526"
    },
    background: {
      default: "#f4f5fd"
    },
  },
  overrides: {
    MuiAppBar: {
      root: {
        transform: 'translateZ(0)',
      }
    }
  }
})

export default function App() {
  const classes = useStyles();
  return (
    <ThemeProvider theme={theme}>
      <div className={classes.container}>
        <Switch>
          <Route exact from="/" render={props => <CourseListView {...props} />} />
          <Route exact from="/play" render={props => <VideoPlayView {...props} />} />
          <Route exact from="/Home" render={props => <CoursesView {...props} />} />
        </Switch>
      </div>
    </ThemeProvider>
  );
}