From a4e2ed82c76fffb5875ba96ab8c0efd5bcb424ef Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Sat, 21 Aug 2021 10:36:07 +0100
Subject: [PATCH] [theme] Fix pseudo class overridden in variants (#27847)

---
 .../material-ui-system/src/createStyled.js    |  4 +-
 .../src/createStyled.test.js                  | 56 +++++++++++++++++++
 2 files changed, 58 insertions(+), 2 deletions(-)

diff --git a/packages/material-ui-system/src/createStyled.js b/packages/material-ui-system/src/createStyled.js
index 7283de87e91322..62b5b6a94adc64 100644
--- a/packages/material-ui-system/src/createStyled.js
+++ b/packages/material-ui-system/src/createStyled.js
@@ -34,7 +34,7 @@ const getVariantStyles = (name, theme) => {
 
 const variantsResolver = (props, styles, theme, name) => {
   const { ownerState = {} } = props;
-  let variantsStyles = {};
+  const variantsStyles = [];
   const themeVariants = theme?.components?.[name]?.variants;
   if (themeVariants) {
     themeVariants.forEach((themeVariant) => {
@@ -45,7 +45,7 @@ const variantsResolver = (props, styles, theme, name) => {
         }
       });
       if (isMatch) {
-        variantsStyles = { ...variantsStyles, ...styles[propsToClassKey(themeVariant.props)] };
+        variantsStyles.push(styles[propsToClassKey(themeVariant.props)]);
       }
     });
   }
diff --git a/packages/material-ui-system/src/createStyled.test.js b/packages/material-ui-system/src/createStyled.test.js
index 07bca6e829014f..e25442aca45d7a 100644
--- a/packages/material-ui-system/src/createStyled.test.js
+++ b/packages/material-ui-system/src/createStyled.test.js
@@ -1,7 +1,12 @@
+import * as React from 'react';
 import { expect } from 'chai';
+import { ThemeProvider, createTheme } from '@material-ui/core/styles';
+import { createClientRender } from 'test/utils';
 import createStyled from './createStyled';
 
 describe('createStyled', () => {
+  const render = createClientRender();
+
   describe('displayName', () => {
     // These tests rely on implementation details (namely `displayName`)
     // Ideally we'd just test if the proper name appears in a React warning.
@@ -44,4 +49,55 @@ describe('createStyled', () => {
       expect(SomeMuiComponent).to.have.property('displayName', 'Styled(Component)');
     });
   });
+
+  describe('styles', () => {
+    it('styles of pseudo classes of variants are merged', () => {
+      const theme = createTheme({
+        components: {
+          MuiButton: {
+            variants: [
+              {
+                props: { variant: 'contained' },
+                style: {
+                  '&.Mui-disabled': {
+                    width: '300px',
+                  },
+                },
+              },
+              {
+                props: { variant: 'contained', color: 'primary' },
+                style: {
+                  '&.Mui-disabled': {
+                    height: '200px',
+                  },
+                },
+              },
+            ],
+          },
+        },
+      });
+      const styled = createStyled({});
+      const Button = styled('button', {
+        shouldForwardProp: (prop) => prop !== 'color' && prop !== 'contained',
+        name: 'MuiButton',
+        slot: 'Root',
+        overridesResolver: (props, styles) => styles.root,
+      })({
+        display: 'flex',
+      });
+
+      const { container } = render(
+        <ThemeProvider theme={theme}>
+          <Button color="primary" variant="contained" className="Mui-disabled">
+            Hello
+          </Button>
+        </ThemeProvider>,
+      );
+
+      expect(container.getElementsByTagName('button')[0]).toHaveComputedStyle({
+        width: '300px',
+        height: '200px',
+      });
+    });
+  });
 });