Allow creating sx container queries from breakpoint keys

[GMchris]

Summary

Right now you can create container queries easily by providing a @ prefixed value as the key in sx. You can also use the containerQueries helper alongside theme breakpoints on the theme object to create an at rule by writing theme.containerQueries.up('sm').

Examples

It'd be convenient to use the built-in theme breakpoint values here. Something like this:

<Box
    sx={{
        padding: {
          '@sm': 1,
          '@md': 2,
          '@': 3,
        }
    }}
/>

Which would be interpreted as

<Box
    sx={{
        padding: {
          '@600': 1,
          '@900': 2,
          '@': 3,
        }
    }}
/>

Motivation

This would streamline creating container query powered styles, as I typically want to use values set by our design system. Right now my approach is verbose in the form of

const theme = useTheme();


<Box
    sx={{
        padding: {
          [`@${theme.breakpoints.values.sm}`]: 1,
          [`@${theme.breakpoints.values.md}`]: 2,
          '@': 3,
        }
    }}
/>

Search keywords: container query, sx, breakpoint

[siriwatknp]

Having it would be a nice thing but I want to see the code changes first. If the added logic does not create more runtime calculation, I am happy to merge the PR.

Do you want to propose an implementation?