[system] Skip styled component from being transformed (#46129)

Author: siriwatknp

packages/mui-system/src/createStyled/createStyled.js

@@ -152,10 +152,15 @@ export default function createStyled(input = {}) {
     });
 
     const transformStyle = (style) => {
-      // On the server Emotion doesn't use React.forwardRef for creating components, so the created
-      // component stays as a function. This condition makes sure that we do not interpolate functions
-      // which are basically components used as a selectors.
-      if (typeof style === 'function' && style.__emotion_real !== style) {
+      // - On the server Emotion doesn't use React.forwardRef for creating components, so the created
+      //   component stays as a function. This condition makes sure that we do not interpolate functions
+      //   which are basically components used as a selectors.
+      // - `style` could be a styled component from a babel plugin for component selectors, This condition
+      //   makes sure that we do not interpolate them.
+      if (style.__emotion_real === style) {
+        return style;
+      }
+      if (typeof style === 'function') {
         return function styleFunctionProcessor(props) {
           return processStyle(props, style);
         };

test/regressions/fixtures/componentSelector/ComponentSelector.js

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+
+const Child = styled('div', {
+  target: 'child', // simulate a class name from @emotion/babel-plugin
+})({
+  color: 'blue',
+});
+
+const Parent = styled('div')`
+  ${Child} {
+    color: red;
+  }
+`;
+
+const Parent2 = styled('div')({
+  [Child]: {
+    color: 'red',
+  },
+});
+
+export default function ComponentSelector() {
+  return (
+    <div>
+      <Child>I am blue.</Child>
+      <Parent>
+        <Child>I am red (literal).</Child>
+      </Parent>
+      <Parent2>
+        <Child>I am red (object).</Child>
+      </Parent2>
+    </div>
+  );
+}