Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Material UI set fixed grid size at the specified breakpoint

i have some struggles with material ui grid size. i want to set fixed grid size at specified breakpoint. For example at xs width is full but at sm width is 200px

<Grid item container direction="row" xs={12}>
    <Grid xs={12} sm={can be size 200px?}>Menu</Grid>
    <Grid item xs={12} sm>Content</Grid>
</Grid>

i tried to give size with style but it effects sm{12} too. i searched in the stack but cannot find proper answer

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks @discovrer. It wasnt what i want but i learned from oyu to write conditions for breakpoints. Here is the working code i ended with.

    import { Grid, createTheme, Box} from '@mui/material'
import React from 'react'

function Navbar1() {

    const defaultTheme = createTheme();

  return (
    <Grid container direction={"row"} alignItems={'center'}>
        <Grid item xs={12} sm={2} sx={{alignItems:{xs:"center"}, justifyContent:{xs:"center", sm:"flex-start"}}} justifyContent={'center'} container>
            <Box component="img" width={50} src="../src/assets/images/reactLogo.png"/>
        </Grid>
        <Grid item bgcolor={defaultTheme.palette.primary.main} padding={1} xs={12} sm>
            <Grid container item direction={'row'} padding={1}>
                <Grid item>
                    HOME &nbsp;&nbsp;&nbsp;
                </Grid>
                <Grid item>
                    ABOUT&nbsp;&nbsp;&nbsp;
                </Grid>
                <Grid item>
                    CONTACT
                </Grid>
            </Grid>
        </Grid>
    </Grid>
  )
}

export default Navbar1


  2. 0

    Try using

    <Grid item container direction="row" xs={12}>
        <Grid xs={12} sx={{display:{xs:"block",sm:"none"}}}>Menu</Grid>
        <Grid sx={{display:{xs:"none",sm:"block"}, backgroundColor:"red", width:"200px"}}>Menu</Grid>
        <Grid item xs={12}>Content</Grid>
    </Grid>

    Let me know if this works for you.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search