Material UI responsive grid direction

user_10429886 0
Viewed 5521

I want the container direction as "row" above md size screen and "column" below md size screen? How can I implement it?

<Grid container direction = "row"(in large screens)/direction = "column"(in small screens)>

I tried something this.

<Grid container classes={gridDirection}>

 gridDirection: {
    direction = "row",
    [theme.breakpoints.down('md')]: {
      direction = "column",
    },
  }

but it is not working probably because "direction" is a react prop and not a CSS style. Is there a way to access these react props inside stylesheet file?

responsive-design material-ui reactjs
6 Answers

You can use useMediaQuery

import useMediaQuery from '@material-ui/core/useMediaQuery';

const largeScreen = useMediaQuery(theme => theme.breakpoints.up('md'));

<Grid container direction={largescreen?"row":"column"}>
user_37171140

The easiest way and I believe the modern way is to use the sx attribute. Then let MUI handle the breakpoints for you. These are the default MUI breakpoints as of writing.

xs = extra-small: 0px
sm = small: 600px
md = medium: 900px
lg = large: 1200px
xl = extra-large: 1536px

xs and sm are generally considered to be mobile/small tablet. MUI is mobile first, so xs will be set and not overwritten until the size is md or larger in my example below.

<Grid container sx={{ flexDirection: { xs: "column", md: "row"} }}>

</Grid>
user_30948260

in MUI v5 you can do it like below:

<Grid container direction={{xs: "column", md: "row"}}>

</Grid>
user_120537560

I am thinking there should be at least 3 ways to do it in MUI v5. with default prop

    <Grid
      container
      spacing={0}
      direction={{ xs: 'column', md: 'row' }}
      justifyContent={{ xs: 'center', md: 'flex-end' }}
      alignItems={{ xs: 'center', md: 'flex-end' }}
    >

... with sx props

        <Grid
          container
          spacing={0}
          sx={{ flexDirection: { xs: 'column', md: 'row'} }}
        >

in theme override

MuiGrid: {
      styleOverrides: {
        root: {
            '&.MuiGrid-container': {
              flexDirection:  'column'
              [theme.breakpoints.up('md')]: {
                flexDirection:  'row'
               },
            },
user_34875790

Use flexDirection instead of direction.

gridDirection: {
    flexDirection = "row",
    [theme.breakpoints.down('md')]: {
      flexDirection = "column",
    },
  }
user_142726110

At least as on date of answering here, Material UI supports direction or flexDirection attributes with component, with these attributes supporting responsive value based on breakpoints mapped object passed to it.

For example, in your case, if direction="row" is needed on large screens and direction="column" is needed for small screens, then the prop can be passed in as: direction={{xs:'row', lg:'column'}}, thus letting MUI prop handle it with the Grid element as:

<Grid container direction={{xs:'row', lg:'column'}}> ... </Grid>

This is the right style to use it in your code, for this case, in my opinion, though other alternative answers here also work well.

user_136948480
Related