[Stepper] v5 styled-components StepContent issue

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

Current Behavior 😯

I am trying v5 with styled-components and something weird is happening for me. If I import StyledEngineProvider from @material-ui/core, something weird happens inside StepContent. It goes all the way into SC’s interleave function and dies in runtime with Cannot read property '0' of undefined. However, if I replace the import to import StyledEngineProvider from '@material-ui/core/StyledEngineProvider', it works no problem. So does import { StyledEngineProvider } from "@material-ui/styled-engine" and import { StyledEngineProvider } from "@material-ui/styled-engine-sc".

I edited the StepContent source to be a noop component and it worked, so it’s probably localized somewhere there.

Expected Behavior 🤔

Shouldn’t die, I guess, or I am doing something wrong with imports

Steps to Reproduce 🕹

https://codesandbox.io/s/styled-components-forked-crstj?file=/src/demo.js

Steps:

Context 🔦

Your Environment 🌎

This my local env, but the same happens in the sandbox

`npx @material-ui/envinfo`

  System:
    OS: macOS 11.2.3
  Binaries:
    Node: 15.6.0 - /usr/local/bin/node
    Yarn: 1.22.10 - ~/Work/redacted/web/node_modules/.bin/yarn
    npm: 7.4.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 89.0.4389.114
    Edge: Not Found
    Firefox: Not Found
    Safari: 14.0.3
  npmPackages:
    @material-ui/core: ^5.0.0-alpha.30 => 5.0.0-alpha.30 
    @material-ui/styled-engine:  5.0.0-alpha.25 
    @material-ui/styled-engine-sc: ^5.0.0-alpha.25 => 5.0.0-alpha.25 
    @material-ui/styles:  5.0.0-alpha.30 
    @material-ui/system:  5.0.0-alpha.29 
    @material-ui/types:  5.1.7 
    @material-ui/unstyled:  5.0.0-alpha.30 
    @material-ui/utils:  5.0.0-alpha.29 
    @types/react: ^16.9.34 => 16.9.44 
    react: 17 => 17.0.2 
    react-dom: 17 => 17.0.2 
    styled-components: 5 => 5.2.3 
    typescript: 4.2.2 => 4.2.2 

[oliviertassinari]

It’s the same bug as #26027 (Table). If someone wants to work on the problem, this diff should already help, then we can add a warning (see diff in #26027) and even update the types to communicate this the first arg is required.

diff --git a/packages/material-ui/src/StepContent/StepContent.js b/packages/material-ui/src/StepContent/StepContent.js
index 1d6aabb9cc..48eaa60ab7 100644
--- a/packages/material-ui/src/StepContent/StepContent.js
+++ b/packages/material-ui/src/StepContent/StepContent.js
@@ -55,7 +55,7 @@ const StepContentTransition = experimentalStyled(
     slot: 'Transition',
     overridesResolver: (props, styles) => styles.transition,
   },
-)();
+)({});

 const StepContent = React.forwardRef(function StepContent(inProps, ref) {
   const props = useThemeProps({ props: inProps, name: 'MuiStepContent' });

@mnajdova tree shaking is only working in production, so when doing import { StyledEngineProvider } from '@material-ui/core' it creates all the styled functions, and fail. styled-components has the first argument required.

[mnajdova]

I could rerpoduce. This is really weird, how:

import StyledEngineProvider from '@material-ui/core/StyledEngineProvider'

works, but

import { StyledEngineProvider } from '@material-ui/core'

doesn’t work, when this should be identical 😕 cc @oliviertassinari @eps1lon do you have any idea why this may be happening?