[system] Make @emotion/* fully supported in the System (mui#33205)

Co-authored-by: Marija Najdova <[email protected]> Co-authored-by: Michał Dudak <[email protected]>
daniel-rabe · Nov 29, 2022 · 48290dd · 48290dd
1 parent 216bf1c
commit 48290dd
Show file tree

Hide file tree

Showing 8 changed files with 98 additions and 10 deletions.
diff --git a/packages/mui-material/src/Badge/Badge.js b/packages/mui-material/src/Badge/Badge.js
@@ -258,7 +258,7 @@ const Badge = React.forwardRef(function Badge(inProps, ref) {
         Badge: BadgeBadge,
         ...components,
       }}
-      className={clsx(className, classes.root, componentsProps.root?.className)}
+      className={clsx(componentsProps.root?.className, classes.root, className)}
       componentsProps={{
         root: {
           ...componentsProps.root,

diff --git a/packages/mui-material/src/Button/Button.js b/packages/mui-material/src/Button/Button.js
@@ -322,7 +322,7 @@ const Button = React.forwardRef(function Button(inProps, ref) {
     variant,
   };
 
-  const classes = useUtilityClasses(ownerState);
+  const { root: classesRoot, ...classes } = useUtilityClasses(ownerState);
 
   const startIcon = startIconProp && (
     <ButtonStartIcon className={classes.startIcon} ownerState={ownerState}>
@@ -339,7 +339,7 @@ const Button = React.forwardRef(function Button(inProps, ref) {
   return (
     <ButtonRoot
       ownerState={ownerState}
-      className={clsx(className, contextProps.className)}
+      className={clsx(contextProps.className, classesRoot, className)}
       component={component}
       disabled={disabled}
       focusRipple={!disableFocusRipple}

diff --git a/packages/mui-material/src/Button/Button.test.js b/packages/mui-material/src/Button/Button.test.js
@@ -4,6 +4,7 @@ import { describeConformance, act, createRenderer, fireEvent, screen } from 'tes
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import Button, { buttonClasses as classes } from '@mui/material/Button';
 import ButtonBase, { touchRippleClasses } from '@mui/material/ButtonBase';
+import { ClassNames } from '@emotion/react';
 
 describe('<Button />', () => {
   const { render, renderToString } = createRenderer();
@@ -634,4 +635,64 @@ describe('<Button />', () => {
     );
     expect(container.querySelectorAll(`.${touchRippleClasses.root}`)).to.have.length(1);
   });
+
+  describe('Emotion compatibility', () => {
+    it('classes.root should overwrite builtin styles.', () => {
+      // This is pink
+      const color = 'rgb(255, 192, 204)';
+
+      const { getByRole } = render(
+        <ClassNames>
+          {({ css }) => (
+            <Button color="primary" classes={{ root: css({ color }) }}>
+              This text should be pink
+            </Button>
+          )}
+        </ClassNames>,
+      );
+      const button = getByRole('button');
+
+      expect(getComputedStyle(button).color).to.equal(color);
+    });
+
+    it('className should overwrite classes.root and builtin styles.', () => {
+      const colorPink = 'rgb(255, 192, 204)';
+      const colorRed = 'rgb(255, 0, 0)';
+
+      const { getByRole } = render(
+        <ClassNames>
+          {({ css }) => (
+            <Button
+              color="primary"
+              className={css({ color: colorRed })}
+              classes={{ root: css({ color: colorPink }) }}
+            >
+              This text should be red
+            </Button>
+          )}
+        </ClassNames>,
+      );
+      const button = getByRole('button');
+
+      expect(getComputedStyle(button).color).to.equal(colorRed);
+    });
+
+    it('classes.* should overwrite builtin styles.', () => {
+      // This is pink
+      const color = 'rgb(255, 192, 204)';
+
+      const { getByRole } = render(
+        <ClassNames>
+          {({ css }) => (
+            <Button color="primary" classes={{ text: css({ color }) }}>
+              This text should be pink
+            </Button>
+          )}
+        </ClassNames>,
+      );
+      const button = getByRole('button');
+
+      expect(getComputedStyle(button).color).to.equal(color);
+    });
+  });
 });
diff --git a/packages/mui-material/src/ButtonBase/TouchRipple.js b/packages/mui-material/src/ButtonBase/TouchRipple.js
@@ -305,7 +305,7 @@ const TouchRipple = React.forwardRef(function TouchRipple(inProps, ref) {
 
   return (
     <TouchRippleRoot
-      className={clsx(classes.root, touchRippleClasses.root, className)}
+      className={clsx(touchRippleClasses.root, classes.root, className)}
       ref={container}
       {...other}
     >

diff --git a/packages/mui-material/src/Select/SelectInput.js b/packages/mui-material/src/Select/SelectInput.js
@@ -518,7 +518,7 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
         onFocus={onFocus}
         {...SelectDisplayProps}
         ownerState={ownerState}
-        className={clsx(classes.select, className, SelectDisplayProps.className)}
+        className={clsx(SelectDisplayProps.className, classes.select, className)}
         // The id is required for proper a11y
         id={buttonId}
       >

diff --git a/packages/mui-utils/src/composeClasses/composeClasses.test.ts b/packages/mui-utils/src/composeClasses/composeClasses.test.ts
@@ -32,8 +32,8 @@ describe('composeClasses', () => {
         },
       ),
     ).to.deep.equal({
-      root: 'MuiTest-root standardOverride MuiTest-standard',
-      slot: 'slotOverride MuiTest-slot',
+      root: 'MuiTest-root MuiTest-standard standardOverride',
+      slot: 'MuiTest-slot slotOverride',
     });
   });
 
@@ -51,8 +51,8 @@ describe('composeClasses', () => {
         },
       ),
     ).to.deep.equal({
-      root: 'MuiTest-root standardOverride MuiTest-standard',
-      slot: 'slotOverride MuiTest-slot',
+      root: 'MuiTest-root MuiTest-standard standardOverride',
+      slot: 'MuiTest-slot slotOverride',
     });
   });
 });
diff --git a/packages/mui-utils/src/composeClasses/composeClasses.ts b/packages/mui-utils/src/composeClasses/composeClasses.ts
@@ -12,10 +12,10 @@ export default function composeClasses<ClassKey extends string>(
       output[slot] = slots[slot]
         .reduce((acc, key) => {
           if (key) {
+            acc.push(getUtilityClass(key));
             if (classes && classes[key]) {
               acc.push(classes[key]);
             }
-            acc.push(getUtilityClass(key));
           }
           return acc;
         }, [] as string[])

diff --git a/test/regressions/fixtures/Button/EmotionCompat.js b/test/regressions/fixtures/Button/EmotionCompat.js
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { ClassNames } from '@emotion/react';
+import Button from '@mui/material/Button';
+
+export default function EmotionCompat() {
+  return (
+    <ClassNames>
+      {({ css }) => (
+        <React.Fragment>
+          <Button color="primary" classes={{ root: css({ color: 'pink' }) }}>
+            This text should be pink
+          </Button>
+          <Button
+            color="primary"
+            className={css({ color: 'red' })}
+            classes={{ root: css({ color: 'pink' }) }}
+          >
+            This text should be red
+          </Button>
+          <Button color="primary" classes={{ text: css({ color: 'pink' }) }}>
+            This text should be pink
+          </Button>
+        </React.Fragment>
+      )}
+    </ClassNames>
+  );
+}