网格项在列中而不是在行中 Material-UI

Question

我正在尝试创建一个连续包含 3 个项目的网格。但是，我的代码中的网格垂直继续，每行只有一个项目。每个网格项目中也有一个图像。如何更改它，以便连续有 3 个网格项。这是我的代码：

Grid.js：

const styles = theme => ({

  root: {
    display: "flex",
    flexWrap: "wrap",
    justifyContent: "space-around",
    overflow: "hidden",
    backgroundColor: theme.palette.background.paper,
    margin: 0
  },


  paper: {
    margin: "1%",
    padding: "1%",
    width: "80%"
  },
      });

class GridListings extends Component {
  componentDidMount() {
    this.props.getPosts();
  }

  render() {
    const { classes } = this.props;
    const { posts, loading } = this.props.post;
    let postContent;

    if (posts === null || loading) {
      postContent = <div> loading</div>;
    } else {
      postContent = <PostFeed posts={posts} />;
    }

    return (
      <div className={classes.root}>
        <Paper className={classes.paper}>
          <Typography align="center" variant="display2">
            Sneaker Listings
          </Typography>

          {postContent}
        </Paper>
      </div>
    );
  }
}

postfeed.js：

class PostFeed extends Component {
  render() {
    const { posts } = this.props;

    return posts.map(post => <ListingPost key={post._id} post={post} />);
  }
}

ListingPost.js：

const styles = theme => ({

  root: {
    flexGrow: 1,
    maxWidth: "30%",
    padding: theme.spacing.unit * 2
  },
  image: {
    maxWidth: "100%",
    maxHeight: "100%"
  },
  img: {
    margin: "auto",
    display: "block",
    maxWidth: "100%",
    maxHeight: "100%"
  }
});

class ListingPost extends Component {
  onDeleteClick(id) {
    console.log(id);
  }

  render() {
    const { post, auth, classes } = this.props;

    return (
      <Paper className={classes.root}>
        <Grid container spacing={16} direction="row">
          <Grid item>
            <ButtonBase className={classes.image}>
              <img
                className={classes.img}
                alt="complex"
                src={post.productImage}
              />
            </ButtonBase>
          </Grid>
          <Grid item xs={12} sm container direction="row">
            <Grid item xs container spacing={16}>
              <Grid item xs>
                <Typography gutterBottom variant="subheading">
                  Shoes
                </Typography>
                <Typography gutterBottom>Size:12</Typography>
                <Typography color="textSecondary">Brand New</Typography>
              </Grid>
              <Grid item>
                <Typography style={{ cursor: "pointer" }}>Remove</Typography>
              </Grid>
            </Grid>
            <Grid item>
              <Typography variant="subheading">$19.00</Typography>
            </Grid>
          </Grid>
        </Grid>

      </Paper>
    );
  }
}

感谢任何帮助。

Answer 1

您必须在下面的组件中使用引导类row。试试下面的代码

PostFeed.js

class PostFeed extends Component {
  render() {
    const { posts } = this.props;
    let postss= [];
    posts.map(post => {
      postss.push(<ListingPost key={post._id} post={post} />);
    });
    return (
      <div className="row">
        {postss}
      </div>
    );
  }
}

或

在您的 grid.js 中添加带有 className 的 div row

<Paper className={classes.paper}>
  <Typography align="center" variant="display2">
    Sneaker Listings
  </Typography>
  <div className="row">
    {postContent}
  </div>
</Paper>