[system] Allow max-width breakpoint instead of min-width

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

For now, responsive values only behaves as we’re using breakpoints.up('xx'), and there’s no way around to make it behaves like breakpoints.down('xx'). Providing a way to change this would be useful to some developers trying to add responsiveness to their app from larger screen resolution to smaller screen resolution.

Examples 🌈

/*
 * Below works same as `theme.breakpoints.up(key)`, hence previously defined padding is overriden
 */
<Paper sx={{ padding: { xs: 0 } }}>
  This box has a responsive width.
</Paper>
/*
 * So we need to add default style value to prevent overriding
 */
<Paper sx={{ padding: { xs: 0, md: 8 } }}>
  This box has a responsive width.
</Paper>

Motivation 🔦

We’re adding responsive(mobile) UI to desktop oriented design, and we found that we need to specify original style property value(if it has one) when using sx prop’s responsive values in material UI components(other than <Box />)

[m4theushw]

Since we removed the Hidden component in https://github.com/mui-org/material-ui/pull/26135, the migration path from the xxDown props to xx requires users to think mobile-first. I proposed to introduce support for xxDown in the sx prop to make this transition easier. My idea is the following:

• xs, sm, md, lg, xl: same as theme.breakpoints.up, nothing to change here.
• xsDown, smDown, mdDown, lgDown, xlDown: same as theme.breakpoints.down.

We should encourage mobile-first, but for those users who started with desktop-first (enterprise applications) and want to add some responsiveness these props could help, instead of having to do the reverse (mobile -> desktop).

@mnajdova This would not require new flags in the theme. https://github.com/mui-org/material-ui/issues/25846#issuecomment-823154868

[oliviertassinari]

Actually, it’s possible in https://tailwindcss.com/docs/breakpoints#custom-media-queries. I can’t find any similar requests on styled systems or chakra.