Элементы сетки находятся в столбце вместо строки 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 просто добавьте div с className row

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