21

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>
  );
}
Olivier Tassinari
  • 8,238
  • 4
  • 23
  • 23
zeckdude
  • 15,877
  • 43
  • 139
  • 187

5 Answers5

20

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.

oldwizard
  • 5,012
  • 2
  • 31
  • 32
14

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

NearHuscarl
  • 66,950
  • 18
  • 261
  • 230
6

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>
zeckdude
  • 15,877
  • 43
  • 139
  • 187
0

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

bajran
  • 1,433
  • 14
  • 23
  • Thanks for the suggestion, but this is very fragile as it depends on the breakpoints staying the same. If the breakpoints are changed on the theme, then your CSS would need to be updated as well. – zeckdude Jun 26 '19 at 05:11
  • yes, you are right, but to make it responsive or to run it in any device you need to used media queries. may be material-ui is also doing that internally for responsive designing – bajran Jun 26 '19 at 05:14
  • https://stackoverflow.com/questions/54342520/how-to-set-multiple-breakpoints-on-grid-item-in-material-ui-in-react?rq=1 check this one may be it helps – bajran Jun 26 '19 at 05:15
  • You don’t necessarily need to use media queries. Often there are props that can be used which will override the media queries that it is using without having to write your own css media queries. – zeckdude Jun 26 '19 at 05:19
0

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!

kopeclu2
  • 1
  • 1
  • 1