React+Material-UI页面新Grid容器无法正常展示卡片的问题求助

Let's get your card grid working properly! I’ve gone through your code and identified a few key issues that are preventing your cards from displaying as expected:

1. Missing Card Components & Grid Item Structure #

Right now, your second Grid container only has a placeholder <h1>—no actual Card components. Plus, Material-UI’s Grid system requires child elements to be wrapped in <Grid item> to handle layout correctly. Without this, your cards won’t align properly in rows/columns.

2. Main App Flex Container Conflict #

Your App component’s container class uses display: "flex", which forces route components to act as flex children. This can restrict the width of your CoursesView’s Grid container, preventing it from expanding to fit cards.

3. Incomplete Grid Configuration #

Your second Grid lacks spacing, padding, and responsive breakpoints—all essential for a clean card layout.

Step-by-Step Fixes #

Update the CoursesView Component

Replace your placeholder Grid with this code, which includes sample cards and proper Grid structure:

// Inside CoursesView, replace the second Grid with this:
<Grid container spacing={3} style={{ padding: theme.spacing(3), width: '100%', marginTop: theme.spacing(4) }}>
  {/* Sample Card 1 */}
  <Grid item xs={12} sm={6} md={4}>
    <Card>
      <CardActionArea>
        <CardMedia
          component="img"
          height="140"
          image="https://via.placeholder.com/300x140"
          alt="Forex Basics Course"
        />
        <CardContent>
          <Typography gutterBottom variant="h5" component="h2">
            Forex Fundamentals
          </Typography>
          <Typography variant="body2" color="textSecondary" component="p">
            Build a strong foundation in forex trading with our beginner-friendly course.
          </Typography>
        </CardContent>
      </CardActionArea>
      <CardActions>
        <Button size="small" color="primary">
          View Course
        </Button>
      </CardActions>
    </Card>
  </Grid>

  {/* Sample Card 2 */}
  <Grid item xs={12} sm={6} md={4}>
    <Card>
      <CardActionArea>
        <CardMedia
          component="img"
          height="140"
          image="https://via.placeholder.com/300x140"
          alt="Advanced Trading Strategies"
        />
        <CardContent>
          <Typography gutterBottom variant="h5" component="h2">
            Advanced Trading Strategies
          </Typography>
          <Typography variant="body2" color="textSecondary" component="p">
            Master pro-level techniques to boost your trading performance.
          </Typography>
        </CardContent>
      </CardActionArea>
      <CardActions>
        <Button size="small" color="primary">
          View Course
        </Button>
      </CardActions>
    </Card>
  </Grid>

  {/* Add more cards here following the same structure */}
</Grid>

Adjust the App Component’s Container Style

Modify the useStyles in your App component to fix the flex layout issue:

const useStyles = makeStyles({
  container: { 
    minHeight: "100vh", // Ensure the app takes full viewport height
    flexDirection: "column", // Stack content vertically instead of horizontally
    display: "flex"
  }
});

Alternatively, if you don’t need flex layout at the app level, you can simplify it to:

const useStyles = makeStyles({
  container: { 
    minHeight: "100vh"
  }
});

Verify Route Access

Double-check that you’re accessing the correct route (/Home) to view your CoursesView component—this is easy to miss!

Key Takeaways #

• Always wrap Grid children in <Grid item> with responsive breakpoints (xs, sm, md) to control how cards stack on different screen sizes.
• Use spacing on the Grid container to add consistent gaps between cards.
• Ensure parent containers don’t restrict the width of your Grid—adjust flex settings if needed.

内容的提问来源于stack exchange，提问作者Waqas Devolper