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 />)

User requests

• https://mui.zendesk.com/agent/tickets/15646 use max-width over min-width.