[system][createStyled] Intercept ownerState coming from props and ownerState (#42358)

Author: DiegoAndai

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

@@ -56,6 +56,8 @@ function processStyleArg(callableStyle, { ownerState, ...props }) {
     );
   }
 
+  const mergedState = { ...props, ...ownerState, ownerState };
+
   if (
     !!resolvedStylesArg &&
     typeof resolvedStylesArg === 'object' &&
@@ -66,7 +68,7 @@ function processStyleArg(callableStyle, { ownerState, ...props }) {
     variants.forEach((variant) => {
       let isMatch = true;
       if (typeof variant.props === 'function') {
-        isMatch = variant.props({ ownerState, ...props, ...ownerState });
+        isMatch = variant.props(mergedState);
       } else {
         Object.keys(variant.props).forEach((key) => {
           if (ownerState?.[key] !== variant.props[key] && props[key] !== variant.props[key]) {
@@ -79,9 +81,7 @@ function processStyleArg(callableStyle, { ownerState, ...props }) {
           result = [result];
         }
         result.push(
-          typeof variant.style === 'function'
-            ? variant.style({ ownerState, ...props, ...ownerState })
-            : variant.style,
+          typeof variant.style === 'function' ? variant.style(mergedState) : variant.style,
         );
       }
     });

test/integration/mui-system/createStyled.test.js

@@ -729,5 +729,37 @@ describe('createStyled', () => {
       expect(getByTestId('outlined')).toHaveComputedStyle({ borderTopColor: 'rgb(0, 0, 255)' });
       expect(getByTestId('text')).toHaveComputedStyle({ color: 'rgb(0, 0, 255)' });
     });
+
+    it('should not consume values from nested ownerState', () => {
+      const styled = createStyled({ defaultTheme: { colors: { blue: 'rgb(0, 0, 255)' } } });
+
+      const Test = styled('div')(({ theme }) => ({
+        variants: [
+          {
+            props: ({ ownerState }) => ownerState.color === 'blue',
+            style: {
+              backgroundColor: theme.colors.blue,
+            },
+          },
+        ],
+      }));
+
+      const ownerState = { color: 'blue' };
+
+      const { getByTestId } = render(
+        <React.Fragment>
+          <Test data-testid="blue" ownerState={ownerState}>
+            Blue
+          </Test>
+          <Test data-testid="nested" ownerState={{ ownerState }}>
+            Nested ownerState
+          </Test>
+        </React.Fragment>,
+      );
+      expect(getByTestId('blue')).toHaveComputedStyle({ backgroundColor: 'rgb(0, 0, 255)' });
+      expect(getByTestId('nested')).not.toHaveComputedStyle({
+        backgroundColor: 'rgb(0, 0, 255)',
+      });
+    });
   });
 });