Material-UI Grid 项目的问题

Question

我在让网格系统正常工作时遇到问题。在一个文件中，我有这样的设置来呈现博客项目：

    return (
    <div>
        {blogs != null
        ? (<Grid container direction="row" xs={12} md={4}>
                {blogs.map((blog) => {
                    console.log(blog);
                    return (
                        <div key={blog._id}>
                            <CardComp data={blog} />
                        </div>
                    )
                })}
            </Grid>)
        : ('loading....')}
    </div>
);

在卡片组件文件中我有以下代码：

    return (
       <Grid item direction="row">
           {data ? (
                   <Card className={classes.root} variant="outlined" >
                       <CardContent>
                           <Typography variant="h5" component="h2">
                               {blogs.title}
                           </Typography>
                           <Typography className={classes.pos} color="textSecondary">
                               {renderDate(blogs.createdAt)}
                           </Typography>
                           <Typography variant="body2" component="p">
                               <p>{blogs.description.substring(0,200)}</p>
                           </Typography>
                       </CardContent>
                       <Grid container alignItems={"center"} alignContent={"space-between"} className={classes.bottom} >
                           <Grid item>
                               <CardActions>
                                   <Button size="small" variant={"outlined"}>Read More</Button>
                               </CardActions>
                           </Grid>
                           <Grid item>
                                   <Grid container justify={"space-between"}>
                                       {blogs.tags.slice(0,3).map((tag, index) => {
                                           return(
                                               <>
                                                   <Button variant={"outlined"} color={"primary"} size={"small"}>{tag}</Button>
                                               </>
                                           )
                                       })}
                                   </Grid>
                           </Grid>
                       </Grid>
                   </Card>
               )
               :('Loading....')}
       </Grid>
);

正如您在上面看到的，我在 .map 渲染之前将容器和方向设置为对象。然而一切都呈现如下：

Answer 1

您需要指定要在<Grid Item> 上显示的卡片的组件大小。不在<Grid Container>。

修复您的代码更改：

<Grid container direction="row" xs={12} md={4}>

到

<Grid container direction="row">

和改变：

<Card className={classes.root} variant="outlined" >

到

<Card className={classes.root} variant="outlined" xs={12} md={4}>

---

查看文档并单击展开图标查看示例：Grid

来自文档。基本网格，点击底部的图标展开源代码。

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

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
  },
  paper: {
    padding: theme.spacing(2),
    textAlign: 'center',
    color: theme.palette.text.secondary,
  },
}));

export default function CenteredGrid() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Grid container spacing={3}>
        <Grid item xs={12}>
          <Paper className={classes.paper}>xs=12</Paper>
        </Grid>
        <Grid item xs={6}>
          <Paper className={classes.paper}>xs=6</Paper>
        </Grid>
        <Grid item xs={6}>
          <Paper className={classes.paper}>xs=6</Paper>
        </Grid>
        <Grid item xs={3}>
          <Paper className={classes.paper}>xs=3</Paper>
        </Grid>
        <Grid item xs={3}>
          <Paper className={classes.paper}>xs=3</Paper>
        </Grid>
        <Grid item xs={3}>
          <Paper className={classes.paper}>xs=3</Paper>
        </Grid>
        <Grid item xs={3}>
          <Paper className={classes.paper}>xs=3</Paper>
        </Grid>
      </Grid>
    </div>
  );
}