Previously in MUI version 4, I was able to apply multiple style parameters within a single media query using the following code:
[theme.breakpoints.up('xs')]: {
width: 100px,
color: green,
},
[theme.breakpoints.up('md')]: {
width: 400px,
color: blue,
},
Now, in MUI version 5, I have the option to set these styles individually on a component using the sx
prop, which is quite convenient:
...
sx={{
width: {xs:'100px', md:'400px'},
color: {xs: 'green', md:'blue'}
}}
However, I would like to achieve the same functionality as in version 4, where multiple parameters can be adjusted under a single breakpoint. It seems that the control has been inverted now, and while this can be helpful, I also want to use the original approach. Is there a way to do this in MUI v5?