Currently in the process of updating my components to utilize the latest MUI version.
I have been converting old classes into the sx props and I find this new styling method to be more readable in my opinion.
However, one thing that concerns me is handling breakpoints within the sx props while still making use of the theme.spacing() mapping.
I used to have a simple class for styling a div with padding :
// old class
titleContainer: {
display: "flex",
alignItems: "center",
[breakpoints.up("lg")]: { padding: spacing(3, 5, 2) },
[breakpoints.down("lg")]: { padding: spacing(2, 2, 1) },
[breakpoints.down("sm")]: { padding: spacing(2, 1, 1) },
},
Now, I have this Box component :
<Box
display="flex"
alignItems="center"
sx={{
padding: {
xs: theme.spacing(2, 1, 1),
md: theme.spacing(2, 2, 1),
lg: theme.spacing(3, 5, 2),
},
}}
>
This implementation works well, however, with the recent MUI update, we no longer need to rely heavily on theme.spacing(), and an array notation would suffice :
sx={{ p: 2 }} OR sx={{ p: [2,1] }}
Unfortunately, the same notation does not work when used for breakpoints, which perplexes me. This situation forces me to either use strings (and calculate pixel values) or stick to theme.spacing().
While it's not a crucial issue, I would like to understand why this limitation exists and how I can enhance the solution.
Cheers!
EDIT
I just realized that using p: [2, 1] does not translate to padding: 16px 8px; as I initially thought. The array serves as a shorthand for breakpoints : p: [2, 1] == p: {xs: 2, sm: 1}
Although this clarification helps clear things up slightly, I am still unsure about the "cleanest" way to define more intricate padding with breakpoints. From what I gather, it might look something like :
sx:{{
pt: [2,1],
px: 2,
pb: [2,3],
}}