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();
    bgcolor: "wheat",
    maxWidth: {
      lg: theme.breakpoints.values["md"],
      md: 80,
      xs: 20
  <Box sx={{ bgcolor: "#cfe8fc", height: "100vh", width: "100%" }} />

Codesandbox Demo


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.

                                width: {
                                    lg: '35vw',
                                    md: '50vw',
                                    xs: '70vw'

Related Query

More Query from same tag