[system] Make @emotion/* fully supported in the System

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,

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}

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);
+    });
+  });
 });

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}
     >

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}

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}

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,

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}
       >

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',
     });
   });
 });

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[])

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>
+  );
+}