The result, at runtime, will be only "@media (max-width: 768px)": { display: "flex" }, instead of combining them (in cascade) such as: "@media (max-width: 768px)": { mt: 1, display: "flex" }.
So, in order to achieve the "combination of the two", I need to redeclare mt: 1 prop, losing the sense of it.
I think it should be added, for declared media queries, a check like key.startsWith("@media") and check if the keys are equal. If so, you should add the prop inside the media query.
N.B.: In case it's the same property, it would be overwritten, and that's totally correct.
I don't know if I should consider this as bug or not.
I used
sx
prop in the past with Material UI (based on emotion lib as well), and created nested components.If I write:
The result, at runtime, will be only
"@media (max-width: 768px)": { display: "flex" }
, instead of combining them (in cascade) such as:"@media (max-width: 768px)": { mt: 1, display: "flex" }
.So, in order to achieve the "combination of the two", I need to redeclare
mt: 1
prop, losing the sense of it.I think it should be added, for declared media queries, a check like key.startsWith("@media") and check if the keys are equal. If so, you should add the prop inside the media query. N.B.: In case it's the same property, it would be overwritten, and that's totally correct.