Media queries are overwritten

[ontech7]

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:

import { Box } from "theme-ui";

export const CompA = ({ children, ssx }: Props) => {
  return (
    <Box 
      sx={{ 
        "@media (max-width: 768px)": { my: 1 }, 
        ...ssx
      }}
    >
      {children}
    </Box>
  )
}

import CompA from "./compA";

export const CompB = (props: Props) => {
  return (
    <CompA 
      ssx={{ 
        "@media (max-width: 768px)": { display: "flex" }
      }}
    >
      test
    </Box>
  )
}

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.

[ontech7]

/c