MUI: How can I remove spacing on Grid item in small breakpoint?

user_83916 0
Viewed 16493

I have a basic Grid using a spacing of 5. I want that spacing not to happen at the xs breakpoint. How can I remove it on the xs breakpoint?

You can see a demo here.

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

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
  },
  paper: {
    height: 140,
    width: 100,
  },
}));

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

  return (
    <Grid container justify="center" spacing={5}>
      <Grid item>
        <Paper className={classes.paper} />
      </Grid>
      <Grid item>
        <Paper className={classes.paper} />
      </Grid>
      <Grid item>
        <Paper className={classes.paper} />
      </Grid>
    </Grid>
  );
}
material-ui reactjs
5 Answers

I think the useMediaQuery hook in combination with theme breakpoints is just what you need.

import { useTheme } from '@material-ui/core/styles';
import useMediaQuery from '@material-ui/core/useMediaQuery';

function MyComponent() {
  const theme = useTheme();
  const isSmall = useMediaQuery(theme.breakpoints.down('sm'));

  return <Grid spacing={isSmall ? 0 : 2}> ... ;
}

See useMediaQuery - css media query hook.

user_1298080

Grid's spacing prop can accept both a number and an object that describes what value should be set on different breakpoints:

A simple number applied to all breakpoints:

<Grid container spacing={3}

A responsive values based on breakpoints, more detail on here:

<Grid
  container
  spacing={{
    xs: 0,
    sm: 2,
    md: 5
  }}
>

Live Demo

Codesandbox Demo

user_94494260

I was able to get it to work using this CSS hackery, but I was hoping for a solution only using props though.

const pageStyles = theme => ({
  leftColumn: {
    [theme.breakpoints.down('sm')]: {
      margin: 0,
      '& > .MuiGrid-item': {
        padding: 0,
      },
    },
  }
});

<Grid
  item
  container
  spacing={5}
  classes={{
    root: classes.leftColumn,
  }}
>
 ...
</Grid>
user_839160

Used media queries for mobile / small screen size

@media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }

find the class from your console and add that in above media queries by removing the spacing or to make margin : 0

user_77631490

I have my ownt component in MUI5 and working really good ! 

import {Box as MUIBox, BoxProps, styled} from "@mui/system";

export interface ResponsiveBoxPaddingProps extends BoxProps {
    pXs?: number,
    pSm?: number,
    pMd?: number,
    pLg?: number,
    pXl?: number,
    myXs?: number,
    mySm?: number,
    myMd?: number,
    myXl?: number,
    myLg?: number,
    mtXs?: number,
    mtSm?: number,
    mtMd?: number,
    mtXl?: number,
    mtLg?: number,
}

export const Box = styled(MUIBox,
    {
        shouldForwardProp: (prop) =>
            prop !== 'pXs' && prop !== 'pSm' && prop !== 'pMd' && prop !== 'pLg' && prop !== 'pXl' &&
            prop !== 'myXs' && prop !== 'mySm' && prop !== 'myMd' && prop !== 'myLg' && prop !== 'myXl' &&
            prop !== 'mtXs' && prop !== 'mtSm' && prop !== 'mtMd' && prop !== 'mtLg' && prop !== 'mtXl',
    })<ResponsiveBoxPaddingProps>(({ pXs, pMd, pSm, pXl, pLg, myXs, myMd, mySm, myXl, myLg, mtLg, mtSm, mtXs, mtMd, mtXl,  theme}) => ({
    padding: pXs,
    margin: myXs && `${theme.spacing(myXs ?? 0)} 0`,
    marginTop: mtXs && theme.spacing(mtXs ?? 0),
    [theme.breakpoints.down("sm")]: {
        padding: pSm,
        margin: mySm && `${theme.spacing(mySm ?? 0)} 0`,
        marginTop: mtSm && theme.spacing(mtSm ?? 0),
    },
    [theme.breakpoints.down("md")]: {
        padding: pMd,
        margin: myMd && `${theme.spacing(myMd ?? 0)} 0`,
        marginTop: mtMd && theme.spacing(mtMd ?? 0),
    },
    [theme.breakpoints.down("xl")]: {
        padding: pXl,
        margin: myXl && `${theme.spacing(myXl ?? 0)} 0`,
        marginTop: mtXl && theme.spacing(mtXl ?? 0),

    },
    [theme.breakpoints.down("lg")]: {
        padding: pLg,
        margin: myLg && `${theme.spacing(myLg ?? 0)} 0`,
        marginTop: mtLg && theme.spacing(mtLg ?? 0),

    },
}))

Example of usage:

 <Box mt={12} mtSm={8} />

Customize it ! Not all usecases are coded! Hope help someone!

user_173838650
Related