Блог

Я рвал на себе волосы, пытаясь заставить эти карточки пользовательского интерфейса двигаться в направлении строк с моей сеткой-я использовал их раньше, и у меня не было проблем с тем, чтобы они выстраивались в ряд в направлении строк, а не в направлении столбцов, и мой код такой же, как и раньше.

Пожалуйста, дайте мне знать, какие ошибки я совершил или какие решения вам известны!

Просто обратите внимание, что свойства direction, wrap, justify и alignitems, которые я добавил в сетку, не имеют никакого значения.

Hero.js

 
import { Grid, makeStyles } from '@material-ui/core'
import React from 'react'
import MediaCard from './Card'

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

function Hero() {

    const classes = useStyles();

    return (
        <div className="Hero">
            <div className={classes.root}>
                <Grid  
                    Container spacing={2} 
                    className="hero-section"
                    direction="row"
                    wrap="nowrap"
                    justify="center"
                    alignItems="center"
                >
                    <Grid  item 
                        xs={6}
                        direction="row"
                        justify="flex-start"
                        alignItems="flex-start"
                    >
                        <MediaCard className="hero-card" />
                    </Grid>
                    <Grid  item 
                        xs={6}
                        direction="row"
                        justify="flex-start"
                        alignItems="flex-start"
                    >
                        <MediaCard className="hero-card" />
                       
                    </Grid>
                </Grid>
            </div>
        </div>
    )
}

export default Hero