[theme] Fix pseudo class overridden in variants (#27847)

mui · Aug 21, 2021 · a4e2ed8 · a4e2ed8
1 parent 0ab84c3
commit a4e2ed8
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 2 deletions.
diff --git 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
@@ -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',
+      });
+    });
+  });
 });