Setting Conditional Spacing in Grid Container using Material UI

Question

There are answer to this question on Stackoverflow as well as on Github but nothing helped me.

I am using <Grid container className={classes.listProjects} spacing={4}> which makes issue of horizontal scroll in mobileview. What I want is this: <Grid container className={classes.listProjects} spacing={isMobile ? 0 : 4}> this will get conditional spacing. Can someone answer how to achieve it. When can I set isMobile: true , should I use useState hook ? but in that isMobile to true . If there is another way ?

Here I found the answer: https://stackoverflow.com/questions/44480053/how-to-detect-if-screen-size-has-changed-to-mobile-in-react — Shakeel, Sep 23 '21 at 11:11
"When can I set isMobile: true , should I use useState hook ?". No need to reinvent the wheel, see the [responsive-values](https://mui.com/components/grid/#responsive-values) section. — NearHuscarl, Sep 23 '21 at 11:12

score 4 · Answer 1 · answered Sep 23 '21 at 13:24

v4

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

const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down("xs"));

<Grid container spacing={isMobile ? 0 : 4}>

v5

import Grid from "@mui/material/Grid";

<Grid container spacing={{ xs: 0, sm: 4 }}>

Setting Conditional Spacing in Grid Container using Material UI

1 Answers1