[system] Support sx on all primitive elements

Summary 💡

It would be great if we can support the sx props on the primitives with jsx pragma. That would basically help us to replace

<Box
  component="img"
  sx={{
    display: "block",
    mr: { sm: 3 },
    mx: { xs: "auto", sm: 0 },
    mb: { xs: 1, sm: 0 },
    width: { xs: "4rem", sm: "6rem" },
    height: { xs: "4rem", sm: "6rem" },
    borderRadius: "50%"
  }}
  src="https://material-ui.com/static/logo_raw.svg"
/>

with

<img
  sx={{
    display: "block",
    mr: { sm: 3 },
    mx: { xs: "auto", sm: 0 },
    mb: { xs: 1, sm: 0 },
    width: { xs: "4rem", sm: "6rem" },
    height: { xs: "4rem", sm: "6rem" },
    borderRadius: "50%"
  }}
  src="https://material-ui.com/static/logo_raw.svg"
/>

For instance https://xstyled.dev/docs/emotion/#use-css-prop or https://theme-ui.com/sx-prop. It seems that we could only support it with emotion, which is OK-ish as it’s the default engine 🙃.

Motivation 🔦

This would help us to move away from templates that would use the Box component everywhere. On the other hand, we plan to support the sx prop on all core components, so it may not be that bad, but still, I think this is something that will bring us in the right direction.

• https://twitter.com/shou_study/status/1397687543726972929

Raised in #23053

[oliviertassinari]

There were also discussions about changing the prefered API from:

<Box component="footer" sx={{ display: "block" }}>
   My footer
</Box>

to

<x.footer sx={{ display: "block" }}>
  My footer
</x.footer>

inspired by https://xstyled.dev/. This is superior when you have long children. The closing tag is more helpful in the latter option (</x.footer> is more helpful than </Box>).

See https://github.com/mui-org/material-ui/pull/27207#issuecomment-880731270 for why it could be valuable for developers.

[yuchi]

There’s no need for a pragma, you can release a Babel macro in a similar fashion to Styled Components’.