[system] transform and themeKey do not work together when using style from material-ui/system

Using the material-ui system function ‘style’ does not work properly when used with theme and styled-components.

const spacing = style({
  prop: "spacing",
  cssProperty: "margin",
  themeKey: "spacing",
  transform: (value) => {
    // This is never run when theme is provided to a styled-component
    console.log(value);
    return `-${value}px`;
  }
});

• [ x] The issue is present in the latest release.
• [ x] I have searched the issues of this repository and believe that this is not a duplicate.

This is addressed in a closed PR (stale) that was never merged https://github.com/mui-org/material-ui/pull/16439/commits/c9fdebb8e63f2ddbf45cd9f06458bc3d05947490

with discussion here: https://github.com/mui-org/material-ui/pull/16439/files#diff-4d07c4a6e8c6006d5f726c3374e11607c23ba62024314e819983e3cfda099768R32-R35

I believe that this piece of the commit should be merged if possible

Current Behavior 😯

The transform function is never ran.

Expected Behavior 🤔

The transform function should run on my css value.

Steps to Reproduce 🕹

https://codesandbox.io/s/material-ui-issue-forked-61g88?file=/src/Demo.js

Sidenote: The latest official material-ui codesandbox is broken when using newest alpha version

Steps:

1. When passing a theme to a styled-component and using the style system like the example

Context 🔦

I want to have the ability to apply a negative margin based on a spacing prop in order to achieve something similar to Mui Grid.

Your Environment 🌎

Tech	Version
Material-UI	v5.?.?
React
Browser
TypeScript
etc.

[ZovcIfzm]

Can I take this one up?

[oliviertassinari]

@cbravo Thanks for opening this issue, it’s an interesting one. I’m doing a digression. We have recently revamped the documentation of the system in #23294. See before vs. after. In this move, we have put a lot of emphasis on the sx as it seemed to be the main driver for the usage of the system. However, I think that your issue is a good reminder that developers are also interested in extending it. I think that it’s something we should pay attention to.

This made me think about how stitches as a utility key in the theme. Basically, developers can do:

createMuiTheme({
  sx: {
    spacing: (value) => ({
      margin: -value * 8
    })
  },
});

<Box sx={{ spacing: 2 }} />

@cbravo Is being able to cherry-pick the different style transformations important for you? Meaning, would the above solution be enough or would you rather only add the transformations you need for a specific component?

@mnajdova I wonder if, no matter what, we shouldn’t add a page in the documentation around how to compose the style functions 1. to extend the sx prop with new behaviors, 2. to cherry-pick custom transformations.

---

@cbravo Regarding your specific issue, it does sound like a bug and https://github.com/mui-org/material-ui/pull/16439/files#r300456428 seems to solve the issue.