[system] Propagate custom style props to component SxProps.

[R-Bower]

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

• Custom props created using style aren't propagated to the SxProps which enhances each MUI component. While the SxProps prop technically works with any valid CSS, the theme-aware transformers aren't applied.

Examples 🌈

import {Box} from "@material-ui/core"
import styled from "@emotion/styled"
import {style} from "@material-ui/system"

const bgStyle = style({
  cssProperty: "backgroundColor"
  prop: "bg",
  themeKey: "palette",
})

const CustomBox = styled(Box)`
  ${bgStyle};
`

// doesn't work
<CustomBox sx={{bg: "background.primary"}} />

One way to get it working today would be to create a custom Sx function and then override the default Sx prop on each component.

What if we provided additional transformers at the ThemeProvider level? Perhaps we could expose a method to override getThemeValue globally?

Updated example*