From 9c4a028aa0f6d01b25ab88eea8ad562059c2e42c Mon Sep 17 00:00:00 2001
From: garronej <joseph.garrone.gj@gmail.com>
Date: Tue, 9 Aug 2022 11:35:11 +0700
Subject: [PATCH] Fix emotion compat, className overriding more specific
 classes

---
 packages/mui-material/src/Tab/Tab.js          |  8 +++--
 packages/mui-material/src/Tab/Tab.test.js     | 25 +++++++++++++
 .../fixtures/Table/EmotionCompat.js           | 35 +++++++++++++++++++
 3 files changed, 65 insertions(+), 3 deletions(-)
 create mode 100644 test/regressions/fixtures/Table/EmotionCompat.js

diff --git a/packages/mui-material/src/Tab/Tab.js b/packages/mui-material/src/Tab/Tab.js
index 4202da6c61ff0a..b5cb563ac28d5a 100644
--- a/packages/mui-material/src/Tab/Tab.js
+++ b/packages/mui-material/src/Tab/Tab.js
@@ -10,11 +10,13 @@ import unsupportedProp from '../utils/unsupportedProp';
 import tabClasses, { getTabUtilityClass } from './tabClasses';
 
 const useUtilityClasses = (ownerState) => {
-  const { classes, textColor, fullWidth, wrapped, icon, label, selected, disabled } = ownerState;
+  const { classes, className, textColor, fullWidth, wrapped, icon, label, selected, disabled } =
+    ownerState;
 
   const slots = {
     root: [
       'root',
+      'className',
       icon && label && 'labelIcon',
       `textColor${capitalize(textColor)}`,
       fullWidth && 'fullWidth',
@@ -25,7 +27,7 @@ const useUtilityClasses = (ownerState) => {
     iconWrapper: ['iconWrapper'],
   };
 
-  return composeClasses(slots, getTabUtilityClass, classes);
+  return composeClasses(slots, getTabUtilityClass, { ...classes, className });
 };
 
 const TabRoot = styled(ButtonBase, {
@@ -187,7 +189,7 @@ const Tab = React.forwardRef(function Tab(inProps, ref) {
   return (
     <TabRoot
       focusRipple={!disableFocusRipple}
-      className={clsx(classes.root, className)}
+      className={classes.root}
       ref={ref}
       role="tab"
       aria-selected={selected}
diff --git a/packages/mui-material/src/Tab/Tab.test.js b/packages/mui-material/src/Tab/Tab.test.js
index 9aada780240f64..0eee177bdde82c 100644
--- a/packages/mui-material/src/Tab/Tab.test.js
+++ b/packages/mui-material/src/Tab/Tab.test.js
@@ -4,6 +4,8 @@ import { expect } from 'chai';
 import * as React from 'react';
 import { spy } from 'sinon';
 import { act, createRenderer, describeConformance, fireEvent } from 'test/utils';
+import { ClassNames } from '@emotion/react';
+import PhoneIcon from '@mui/icons-material/Phone';
 
 describe('<Tab />', () => {
   const { render } = createRenderer();
@@ -166,4 +168,27 @@ describe('<Tab />', () => {
       expect(style).to.have.property('alignText', 'center');
     });
   });
+
+  describe('Emotion compatibility', () => {
+    it('className should not overwrite the the more specific classes that applies to root', () => {
+      // This is pink
+      const colorPink = 'rgb(255, 192, 204)';
+
+      const { getByRole } = render(
+        <ClassNames>
+          {({ css }) => (
+            <Tab
+              icon={<PhoneIcon />}
+              label="Background should be pink"
+              className={css({ backgroundColor: 'red' })}
+              classes={{ labelIcon: css({ backgroundColor: colorPink }) }}
+            />
+          )}
+        </ClassNames>,
+      );
+      const tab = getByRole('tab');
+
+      expect(getComputedStyle(tab).backgroundColor).to.equal(colorPink);
+    });
+  });
 });
diff --git a/test/regressions/fixtures/Table/EmotionCompat.js b/test/regressions/fixtures/Table/EmotionCompat.js
new file mode 100644
index 00000000000000..93d198f5e878c5
--- /dev/null
+++ b/test/regressions/fixtures/Table/EmotionCompat.js
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { ClassNames } from '@emotion/react';
+import Tab from '@mui/material/Tab';
+import PhoneIcon from '@mui/icons-material/Phone';
+
+export default function EmotionCompat() {
+  return (
+    <ClassNames>
+      {({ css }) => (
+        <React.Fragment>
+          <Tab
+            icon={<PhoneIcon />}
+            label="Background should be green"
+            classes={{
+              root: css({
+                backgroundColor: 'red',
+              }),
+              labelIcon: css({ backgroundColor: 'green' }),
+            }}
+          />
+          <Tab
+            icon={<PhoneIcon />}
+            label="Background should be green"
+            className={css({ backgroundColor: 'red' })}
+            classes={{
+              labelIcon: css({
+                backgroundColor: 'green',
+              }),
+            }}
+          />
+        </React.Fragment>
+      )}
+    </ClassNames>
+  );
+}