From 0ac3835c7e3dc4d2693ee376ab63e103c9a5c91c Mon Sep 17 00:00:00 2001
From: garronej <joseph.garrone.gj@gmail.com>
Date: Sat, 18 Jun 2022 15:41:35 +0200
Subject: [PATCH 1/7] POC: Make Button work with Emotion custom styles

---
 packages/mui-material/src/Button/Button.js   |  5 ++--
 test/regressions/fixtures/Emotion/Emotion.js | 24 ++++++++++++++++++++
 2 files changed, 27 insertions(+), 2 deletions(-)
 create mode 100644 test/regressions/fixtures/Emotion/Emotion.js

diff --git a/packages/mui-material/src/Button/Button.js b/packages/mui-material/src/Button/Button.js
index 46e08ee91794ad..a434470e9e107f 100644
--- a/packages/mui-material/src/Button/Button.js
+++ b/packages/mui-material/src/Button/Button.js
@@ -322,7 +322,8 @@ const Button = React.forwardRef(function Button(inProps, ref) {
     variant,
   };
 
-  const classes = useUtilityClasses(ownerState);
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  const { root: classes_root, ...classes } = useUtilityClasses(ownerState);
 
   const startIcon = startIconProp && (
     <ButtonStartIcon className={classes.startIcon} ownerState={ownerState}>
@@ -339,7 +340,7 @@ const Button = React.forwardRef(function Button(inProps, ref) {
   return (
     <ButtonRoot
       ownerState={ownerState}
-      className={clsx(className, contextProps.className)}
+      className={clsx(contextProps.className, classes_root, className)}
       component={component}
       disabled={disabled}
       focusRipple={!disableFocusRipple}
diff --git a/test/regressions/fixtures/Emotion/Emotion.js b/test/regressions/fixtures/Emotion/Emotion.js
new file mode 100644
index 00000000000000..9b97d7b305fefc
--- /dev/null
+++ b/test/regressions/fixtures/Emotion/Emotion.js
@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { ClassNames } from '@emotion/react';
+import Button from '@mui/material/Button';
+
+export default function Cx() {
+  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>
+        </React.Fragment>
+      )}
+    </ClassNames>
+  );
+}
\ No newline at end of file

From 1a076e3548b553e538a7330038cf9ea39eeacdc4 Mon Sep 17 00:00:00 2001
From: garronej <joseph.garrone.gj@gmail.com>
Date: Sun, 10 Jul 2022 01:18:30 +0200
Subject: [PATCH 2/7] Emotion compatibility: Add unit and regression tests for
 Button

---
 .../mui-material/src/Button/Button.test.js    | 61 +++++++++++++++++++
 .../Emotion.js => Button/EmotionCompat.js}    |  7 ++-
 2 files changed, 66 insertions(+), 2 deletions(-)
 rename test/regressions/fixtures/{Emotion/Emotion.js => Button/EmotionCompat.js} (77%)

diff --git a/packages/mui-material/src/Button/Button.test.js b/packages/mui-material/src/Button/Button.test.js
index 1a1e6983eb4a93..b7686fe2f9b362 100644
--- 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/test/regressions/fixtures/Emotion/Emotion.js b/test/regressions/fixtures/Button/EmotionCompat.js
similarity index 77%
rename from test/regressions/fixtures/Emotion/Emotion.js
rename to test/regressions/fixtures/Button/EmotionCompat.js
index 9b97d7b305fefc..e7734695b6e496 100644
--- a/test/regressions/fixtures/Emotion/Emotion.js
+++ b/test/regressions/fixtures/Button/EmotionCompat.js
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ClassNames } from '@emotion/react';
 import Button from '@mui/material/Button';
 
-export default function Cx() {
+export default function EmotionCompat() {
   return (
     <ClassNames>
       {({ css }) => (
@@ -17,8 +17,11 @@ export default function Cx() {
           >
             This text should be red
           </Button>
+          <Button color="primary" classes={{ text: css({ color: 'pink' }) }}>
+            This text should be pink
+          </Button>
         </React.Fragment>
       )}
     </ClassNames>
   );
-}
\ No newline at end of file
+}

From 27cc70b8550e3cbda0fbc88f01819de6af08d394 Mon Sep 17 00:00:00 2001
From: garronej <joseph.garrone.gj@gmail.com>
Date: Sun, 10 Jul 2022 03:00:49 +0200
Subject: [PATCH 3/7] Emotion compatibility: Reorder classes in composeClasses
 utility

---
 .../mui-utils/src/composeClasses/composeClasses.test.ts   | 8 ++++----
 packages/mui-utils/src/composeClasses/composeClasses.ts   | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/mui-utils/src/composeClasses/composeClasses.test.ts b/packages/mui-utils/src/composeClasses/composeClasses.test.ts
index 61af819b25efc8..310c217bf8414a 100644
--- 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
index 633f38d55d1d2e..5b4726e208699a 100644
--- 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[])

From 82aad05a9ca99a64c45739ac45440ef0c03886da Mon Sep 17 00:00:00 2001
From: garronej <joseph.garrone.gj@gmail.com>
Date: Sun, 10 Jul 2022 04:32:48 +0200
Subject: [PATCH 4/7] Emotion compatibility: Reorder classes in various
 components

---
 packages/mui-material/src/Badge/Badge.js                 | 2 +-
 packages/mui-material/src/ButtonBase/TouchRipple.js      | 2 +-
 packages/mui-material/src/Drawer/Drawer.js               | 6 +++---
 packages/mui-material/src/ImageList/ImageList.js         | 2 +-
 packages/mui-material/src/ImageListItem/ImageListItem.js | 2 +-
 packages/mui-material/src/Select/SelectInput.js          | 2 +-
 6 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/mui-material/src/Badge/Badge.js b/packages/mui-material/src/Badge/Badge.js
index 6123733758546f..731c7a5af48a77 100644
--- 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/ButtonBase/TouchRipple.js b/packages/mui-material/src/ButtonBase/TouchRipple.js
index 76fc08a1b9ba30..34f9fcdf982105 100644
--- a/packages/mui-material/src/ButtonBase/TouchRipple.js
+++ b/packages/mui-material/src/ButtonBase/TouchRipple.js
@@ -304,7 +304,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/Drawer/Drawer.js b/packages/mui-material/src/Drawer/Drawer.js
index bd9024214b870e..7f032f440ea830 100644
--- a/packages/mui-material/src/Drawer/Drawer.js
+++ b/packages/mui-material/src/Drawer/Drawer.js
@@ -208,7 +208,7 @@ const Drawer = React.forwardRef(function Drawer(inProps, ref) {
   if (variant === 'permanent') {
     return (
       <DrawerDockedRoot
-        className={clsx(classes.root, classes.docked, className)}
+        className={clsx(classes.docked, classes.root, className)}
         ownerState={ownerState}
         ref={ref}
         {...other}
@@ -233,7 +233,7 @@ const Drawer = React.forwardRef(function Drawer(inProps, ref) {
   if (variant === 'persistent') {
     return (
       <DrawerDockedRoot
-        className={clsx(classes.root, classes.docked, className)}
+        className={clsx(classes.docked, classes.root, className)}
         ownerState={ownerState}
         ref={ref}
         {...other}
@@ -251,7 +251,7 @@ const Drawer = React.forwardRef(function Drawer(inProps, ref) {
         ...BackdropPropsProp,
         transitionDuration,
       }}
-      className={clsx(classes.root, classes.modal, className)}
+      className={clsx(classes.modal, classes.root, className)}
       open={open}
       ownerState={ownerState}
       onClose={onClose}
diff --git a/packages/mui-material/src/ImageList/ImageList.js b/packages/mui-material/src/ImageList/ImageList.js
index 2a4f1e9e956c33..fdb2f9c77c294d 100644
--- a/packages/mui-material/src/ImageList/ImageList.js
+++ b/packages/mui-material/src/ImageList/ImageList.js
@@ -89,7 +89,7 @@ const ImageList = React.forwardRef(function ImageList(inProps, ref) {
   return (
     <ImageListRoot
       as={component}
-      className={clsx(classes.root, classes[variant], className)}
+      className={clsx(classes[variant], classes.root, className)}
       ref={ref}
       style={style}
       ownerState={ownerState}
diff --git a/packages/mui-material/src/ImageListItem/ImageListItem.js b/packages/mui-material/src/ImageListItem/ImageListItem.js
index b9db464c746b5a..b333ae86c33cec 100644
--- a/packages/mui-material/src/ImageListItem/ImageListItem.js
+++ b/packages/mui-material/src/ImageListItem/ImageListItem.js
@@ -93,7 +93,7 @@ const ImageListItem = React.forwardRef(function ImageListItem(inProps, ref) {
   return (
     <ImageListItemRoot
       as={component}
-      className={clsx(classes.root, classes[variant], className)}
+      className={clsx(classes[variant], classes.root, className)}
       ref={ref}
       style={{
         height,
diff --git a/packages/mui-material/src/Select/SelectInput.js b/packages/mui-material/src/Select/SelectInput.js
index e1d13d6502c31e..81f92e9c4942d1 100644
--- 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}
       >

From a2558a28a891bd030f3969c8b2f45dba2f4f8afe Mon Sep 17 00:00:00 2001
From: garronej <joseph.garrone.gj@gmail.com>
Date: Fri, 15 Jul 2022 08:46:27 +0200
Subject: [PATCH 5/7] Fix ordering according to specificity #33205

---
 packages/mui-material/src/Drawer/Drawer.js               | 6 +++---
 packages/mui-material/src/ImageList/ImageList.js         | 2 +-
 packages/mui-material/src/ImageListItem/ImageListItem.js | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/mui-material/src/Drawer/Drawer.js b/packages/mui-material/src/Drawer/Drawer.js
index 7f032f440ea830..bd9024214b870e 100644
--- a/packages/mui-material/src/Drawer/Drawer.js
+++ b/packages/mui-material/src/Drawer/Drawer.js
@@ -208,7 +208,7 @@ const Drawer = React.forwardRef(function Drawer(inProps, ref) {
   if (variant === 'permanent') {
     return (
       <DrawerDockedRoot
-        className={clsx(classes.docked, classes.root, className)}
+        className={clsx(classes.root, classes.docked, className)}
         ownerState={ownerState}
         ref={ref}
         {...other}
@@ -233,7 +233,7 @@ const Drawer = React.forwardRef(function Drawer(inProps, ref) {
   if (variant === 'persistent') {
     return (
       <DrawerDockedRoot
-        className={clsx(classes.docked, classes.root, className)}
+        className={clsx(classes.root, classes.docked, className)}
         ownerState={ownerState}
         ref={ref}
         {...other}
@@ -251,7 +251,7 @@ const Drawer = React.forwardRef(function Drawer(inProps, ref) {
         ...BackdropPropsProp,
         transitionDuration,
       }}
-      className={clsx(classes.modal, classes.root, className)}
+      className={clsx(classes.root, classes.modal, className)}
       open={open}
       ownerState={ownerState}
       onClose={onClose}
diff --git a/packages/mui-material/src/ImageList/ImageList.js b/packages/mui-material/src/ImageList/ImageList.js
index fdb2f9c77c294d..2a4f1e9e956c33 100644
--- a/packages/mui-material/src/ImageList/ImageList.js
+++ b/packages/mui-material/src/ImageList/ImageList.js
@@ -89,7 +89,7 @@ const ImageList = React.forwardRef(function ImageList(inProps, ref) {
   return (
     <ImageListRoot
       as={component}
-      className={clsx(classes[variant], classes.root, className)}
+      className={clsx(classes.root, classes[variant], className)}
       ref={ref}
       style={style}
       ownerState={ownerState}
diff --git a/packages/mui-material/src/ImageListItem/ImageListItem.js b/packages/mui-material/src/ImageListItem/ImageListItem.js
index b333ae86c33cec..b9db464c746b5a 100644
--- a/packages/mui-material/src/ImageListItem/ImageListItem.js
+++ b/packages/mui-material/src/ImageListItem/ImageListItem.js
@@ -93,7 +93,7 @@ const ImageListItem = React.forwardRef(function ImageListItem(inProps, ref) {
   return (
     <ImageListItemRoot
       as={component}
-      className={clsx(classes[variant], classes.root, className)}
+      className={clsx(classes.root, classes[variant], className)}
       ref={ref}
       style={{
         height,

From 84c3f6c97754d60ad11757534870601396d53735 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Wed, 27 Jul 2022 15:56:26 +0200
Subject: [PATCH 6/7] Update packages/mui-material/src/Button/Button.js

---
 packages/mui-material/src/Button/Button.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/mui-material/src/Button/Button.js b/packages/mui-material/src/Button/Button.js
index a434470e9e107f..09b9c738641f5d 100644
--- a/packages/mui-material/src/Button/Button.js
+++ b/packages/mui-material/src/Button/Button.js
@@ -322,8 +322,7 @@ const Button = React.forwardRef(function Button(inProps, ref) {
     variant,
   };
 
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  const { root: classes_root, ...classes } = useUtilityClasses(ownerState);
+  const { root: classesRoot, ...classes } = useUtilityClasses(ownerState);
 
   const startIcon = startIconProp && (
     <ButtonStartIcon className={classes.startIcon} ownerState={ownerState}>

From e808c863f7a4fc65fcb2d8f13a7624e7a7e3321a Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Wed, 27 Jul 2022 15:56:34 +0200
Subject: [PATCH 7/7] Update packages/mui-material/src/Button/Button.js

---
 packages/mui-material/src/Button/Button.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mui-material/src/Button/Button.js b/packages/mui-material/src/Button/Button.js
index 09b9c738641f5d..37909a18464889 100644
--- a/packages/mui-material/src/Button/Button.js
+++ b/packages/mui-material/src/Button/Button.js
@@ -339,7 +339,7 @@ const Button = React.forwardRef(function Button(inProps, ref) {
   return (
     <ButtonRoot
       ownerState={ownerState}
-      className={clsx(contextProps.className, classes_root, className)}
+      className={clsx(contextProps.className, classesRoot, className)}
       component={component}
       disabled={disabled}
       focusRipple={!disableFocusRipple}