[system] `styled` should accept sx syntax

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

Summary 💡

styled and sx should accept the same set of props.

Examples 🌈

const WrapperPaper = styled(Paper)({
  my: 2,
  mx: "auto",
  padding: 2,
  minWidth: "600px",
});
// is different from
<Paper sx={{ my: 2, mx: "auto", padding: 2, minWidth: "600px" }}>

The WrapperPaper component doesn’t seem to apply the shortcuts

TypeScript accepts those mx and my props though in the styled call, they are simply not translated afterward. The sx version works fine, but leads to code duplication in my use case.

Motivation 🔦

I’d expect both to have the same API.

[mnajdova]

I don’t have to get the theme and pass it to the sx function again. I expect that this should work.

Will need to check to see how this could work.

Also, what I suggest should work with all of these scenarios:

I would try to keep the API to minimum, I would say the first and last APIs are enough.

Is the second option possible?

Yes, but there would be the conflict between the sx prop and the sx function, we would need to override it which can be surprising. What’s wrong with importing a module? Otherwise we need to again invent some new API. With the import is clear what is expected - I am preprocessing the input of the styled() utility.

[eric-burel]

An sx function that behaves like a mix between styled and sx prop could be defined like this:

// hoc with syntax similar to styled but accepting sx styles
const sx = (C) => (sxStyle) => (props) => {
   return <C sx={typeof sxStyle === "function" ? sxStyle(props) : sxStyle} {...props} />
}
// usage
const StyledFooBasic= sx(Foo)({ mx: 1, backgroundColor: "red", padding: theme => theme.spacing(1) })
) 
const StyledFooWithProps = sx(Foo)(
  props => ({ mx: 1, backgroundColor: props.myCustomColor, padding: theme => theme.spacing(1) })
) 

That’s very draftish and lacks typings, but I think this could be done already in user-land. I haven’t yet switched my main project to mui v5 but I might give this a shot later on.