Блог

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

Вот мой код

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


const useStyles =makeStyles(theme=>({
    root:{
      flexGrow:1
    },
  
    heading:{
       fontSize:"clamp(74px,9vw,120px)",
       margin:"6px auto",
       opacity:"0.5",
       color:"#dee3e4",
       textAlign:"center",
       fontFamily:"Poppins,sans-serif"
       
    }, 
}))
function Projects() {
    const { heading,root}=useStyles();
    return (
        <div>
            <h1 className={heading}>Projects</h1>
            <Box m={5}  >
            <Grid container spacing={3} className={root} >  
            
              <Grid sm={12} md={6} lg={3}  >     
                    <Card>
                    <h1>Booksapp</h1>
                    <CardContent>Lorem, ipsum dolor sit amet consectetur adipisicing eltatis.
                    Lorem, ipsum dolor sit amet consectetur adipisicing eltatis.
                    Lorem, ipsum dolor sit amet consectetur adipisicing eltatis.
                    Lorem, ipsum dolor sit amet consectetur adipisicing eltatis.
                    Lorem, ipsum dolor sit amet consectetur adipisicing eltatis.
                    </CardContent>
                  </Card>
               </Grid>
                <Grid  sm={12} md={6} lg={3}>
                  <Card>
                    <h1>Booksapp</h1>
                    <CardContent>Lorem, ipsum dolor sit amet consectetur adipisicing eltatis.
                    Lorem, ipsum dolor sit amet consectetur adipisicing eltatis.
                    Lorem, ipsum dolor sit amet consectetur adipisicing eltatis.
                    Lorem, ipsum dolor sit amet consectetur adipisicing eltatis.
                    Lorem, ipsum dolor sit amet consectetur adipisicing eltatis.
                    </CardContent>
                  </Card>
                </Grid>
                <Grid  sm={12} md={6} lg={3}>
                  <Card>
                    <h1>Booksapp</h1>
                    <CardContent>Lorem, ipsum dolor sit amet consectetur adipisicing eltatis.
                    Lorem, ipsum dolor sit amet consectetur adipisicing eltatis.
                    Lorem, ipsum dolor sit amet consectetur adipisicing eltatis.
                    Lorem, ipsum dolor sit amet consectetur adipisicing eltatis.
                    Lorem, ipsum dolor sit amet consectetur adipisicing eltatis.
                    </CardContent>
                  </Card>
                </Grid>     
            </Grid>
            </Box>
           
        </div>
    )
}

export default Projects
 
 

Проблема в том, что вы не передаете item логическую опору элементам сетки. spacing Реквизит определяет расстояние между item компонентами, и, поскольку в разнесенном коде нет элементов сетки, интервал не применяется.

 <Grid container spacing={3} className={root}>
  <Grid item sm={12} md={6} lg={3}>
    <Card>Content</Card>
  </Grid>
</Grid>