score: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>

Codesandbox Demo

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

Related Query

More Query from same tag