Open
Description
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