Breakpoint keys in sx prop

[johnkorzhuk]

Usage example:

<Container
    sx={{
      position: 'absolute',
      top: {
        xs: 2,
        md: 4,
        lg: 6,
      },
    }}
>

Possible implementation – describe how the feature can be implemented
https://mui.com/material-ui/react-box/#the-sx-prop

[rtivital]

We will not add this syntax, you can use theme.fn.largerThan or other functions to manage responsive styles.

[johnkorzhuk]

While theme.fn.largerThan achieves the same functionality, I think the MUI approach was a significant improvement to the DX of the library - especially when prototyping. This may just be my opinion, but being able to adjust the style breakpoints inline to the component inside the sx prop saves quite a bit of time. Compare that to having to define a new useStyles hook then passing classes to the components. The inline approach feels intuitive and is something I quite enjoy from MUI.