reactjs - Material UI Grid 一直显示为一列

Question

我一直在使用 Material UI 网格，我试图在卡片网格中显示数据，这些卡片以行而不是单列显示。我的网格当前显示为这样堆叠在一列中(请忽略卡片的大小，这只是放大的屏幕截图):


我希望网格按行显示，而不是单列:

我觉得我错过了一些简单的东西，但我不确定为什么它会一直堆积在一个列中。代码如下:

import React, { useState, useEffect } from "react"

// components

import Grid from "@material-ui/core/Grid"
import { makeStyles } from "@material-ui/core/styles"
import axios from "axios"

import RepoCard from "../components/RepoCard"

import Container from "@material-ui/core/Container"

// context

const Profile = () => {
  const [data, setData] = useState(null)

  const fetchGit = () => {
    axios
      .get(`https://api.github.com/users/rterrell25/repos?`)
      .then((res) => {
        setData(res.data)
        console.log(res.data)
      })
      .catch((err) => console.log(err))
  }

  useEffect(() => {
    fetchGit()
  }, [])

  return (
    <div style={{ marginTop: 85 }}>
      {!data ? (
        <h1>Loading...</h1>
      ) : (
        data.map((user) => (
          <Container>
            <Grid container spacing={4}>
              <RepoCard name={user.name} />
            </Grid>
          </Container>
        ))
      )}
    </div>
  )
}
export default Profile

repo 卡组件代码:

import React from "react"
import { Link } from "react-router-dom"

// MUI stuff
import Button from "@material-ui/core/Button"
import { makeStyles } from "@material-ui/core/styles"
import Card from "@material-ui/core/Card"
import CardActions from "@material-ui/core/CardActions"
import CardContent from "@material-ui/core/CardContent"
import CardMedia from "@material-ui/core/CardMedia"
import Grid from "@material-ui/core/Grid"
import Typography from "@material-ui/core/Typography"

const useStyles = makeStyles((theme) => ({
  icon: {
    marginRight: theme.spacing(2),
  },
  heroContent: {
    backgroundColor: theme.palette.background.paper,
    padding: theme.spacing(8, 0, 6),
  },
  heroButtons: {
    marginTop: theme.spacing(4),
  },
  cardGrid: {
    paddingTop: theme.spacing(8),
    paddingBottom: theme.spacing(8),
  },
  card: {
    height: "100%",
    display: "flex",
    flexDirection: "column",
  },
  cardMedia: {
    paddingTop: "56.25%", // 16:9
  },
  cardContent: {
    flexGrow: 1,
  },
  footer: {
    backgroundColor: theme.palette.background.paper,
    padding: theme.spacing(6),
  },
}))

const MovieCard = ({ name }) => {
  const classes = useStyles()

  return (
    <Grid item xs={12} sm={6} md={4}>
      <Card className={classes.card}>
        <CardMedia
          className={classes.cardMedia}
          image={"#"}
          title='Movie nane'
        />
        <CardContent className={classes.cardContent}>
          <Typography gutterBottom variant='h5' component='h2'>
            "Movie name"
          </Typography>
          <Typography>Genre: Comedy</Typography>
          <Typography noWrap>"Movie Summary"</Typography>
        </CardContent>
        <CardActions>
          <Link to={""}>
            <Button size='small' color='primary'>
              Details
            </Button>
          </Link>
        </CardActions>
      </Card>
    </Grid>
  )
}

export default MovieCard

Answer 1

更改 xs={12}至 xs={4}

The grid creates visual consistency between layouts while allowing flexibility across a wide variety of designs. Material Design’s responsive UI is based on a 12-column grid layout.

引用: Material-UI Grid文档