I have recently revised my very old app where styling with MUI is like this
const filterStyle = {
width: "320px !important",
margin: "0 auto",
"@media(maxWidth: 780px)": {
width: "80%",
},
};
and this object is consumed in sx like this
<Stack
role="form"
sx={{ ...filterStyle }}
direction="row"
spacing={2}
>
I want to use variable breakpoint VERY_SMALL_BREAKPOINT -without using theme – like this:
const filterStyle = {
width: "320px !important",
margin: "0 auto",
"@media(maxWidth: VERY_SMALL_BREAKPOINT)": {
width: "80%",
},
};
Obviously, it does not work; but is there a way to make it work? I would not use .matches etc, would rather solve the issue with code similar to existing one. Is that possible?