'Use breakpoints in Material-UI Container

I use Container and it needs to be different size for mobile and for desktop.

How can I have the Container maxWidth different size based on Breakpoints like this:

<Container maxWidth={{xs:"lg", lg:"md"}}>

instead of using the useStyle and adding a className.

reactjs material-ui

Solution 1:^[1]

You can do that by using the sx prop which supports responsive values. The breakpoint values can be accessed in theme.breakpoints.values object. See the default theme here to know more.

const theme = useTheme();

<Container
  sx={{
    bgcolor: "wheat",
    maxWidth: {
      lg: theme.breakpoints.values["md"],
      md: 80,
      xs: 20
    }
  }}
>
  <Box sx={{ bgcolor: "#cfe8fc", height: "100vh", width: "100%" }} />
</Container>

Solution 2:^[2]

I found most of answer related to functional component, but if you are using class component we can directly use like this. I like to use 'vh' and 'vw' as this unit is direclty adjustable to viewport.

                     <Container
                            sx={{
                                width: {
                                    lg: '35vw',
                                    md: '50vw',
                                    xs: '70vw'
                                  }
                              
                            }}>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	u_pendra

'Use breakpoints in Material-UI Container

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]