Use breakpoints in Material-UI Container

user_5203183 0
Viewed 1328

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.

material-ui reactjs
2 Answers

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>

Codesandbox Demo

user_94494260

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