Use breakpoints in Material-UI Container

Question

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.

Answer 1

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'
                                  }
                              
                            }}>

Answer 2

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>