[material] Make @emotion/* fully supported in all Material UI compone…

…nts (#34451)

packages/mui-material/src/Button/Button.js

@@ -322,7 +322,7 @@ const Button = React.forwardRef(function Button(inProps, ref) {
     variant,
   };
 
-  const { root: classesRoot, ...classes } = useUtilityClasses(ownerState);
+  const 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(contextProps.className, classesRoot, className)}
+      className={clsx(contextProps.className, classes.root, className)}
       component={component}
       disabled={disabled}
       focusRipple={!disableFocusRipple}

packages/mui-material/src/Checkbox/Checkbox.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import { refType } from '@mui/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { alpha } from '@mui/system';
@@ -86,6 +87,7 @@ const Checkbox = React.forwardRef(function Checkbox(inProps, ref) {
     indeterminateIcon: indeterminateIconProp = defaultIndeterminateIcon,
     inputProps,
     size = 'medium',
+    className,
     ...other
   } = props;
 
@@ -116,6 +118,7 @@ const Checkbox = React.forwardRef(function Checkbox(inProps, ref) {
       })}
       ownerState={ownerState}
       ref={ref}
+      className={clsx(classes.root, className)}
       {...other}
       classes={classes}
     />
@@ -140,6 +143,10 @@ Checkbox.propTypes /* remove-proptypes */ = {
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
   /**
    * The color of the component.
    * It supports both default and custom theme colors, which can be added as shown in the

packages/mui-material/src/DialogContentText/DialogContentText.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import styled, { rootShouldForwardProp } from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
@@ -30,7 +31,7 @@ const DialogContentTextRoot = styled(Typography, {
 
 const DialogContentText = React.forwardRef(function DialogContentText(inProps, ref) {
   const props = useThemeProps({ props: inProps, name: 'MuiDialogContentText' });
-  const { children, ...ownerState } = props;
+  const { children, className, ...ownerState } = props;
   const classes = useUtilityClasses(ownerState);
 
   return (
@@ -40,6 +41,7 @@ const DialogContentText = React.forwardRef(function DialogContentText(inProps, r
       color="text.secondary"
       ref={ref}
       ownerState={ownerState}
+      className={clsx(classes.root, className)}
       {...props}
       classes={classes}
     />
@@ -59,6 +61,10 @@ DialogContentText.propTypes /* remove-proptypes */ = {
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

packages/mui-material/src/InputLabel/InputLabel.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
+import clsx from 'clsx';
 import formControlState from '../FormControl/formControlState';
 import useFormControl from '../FormControl/useFormControl';
 import FormLabel, { formLabelClasses } from '../FormLabel';
@@ -117,7 +118,14 @@ const InputLabelRoot = styled(FormLabel, {
 
 const InputLabel = React.forwardRef(function InputLabel(inProps, ref) {
   const props = useThemeProps({ name: 'MuiInputLabel', props: inProps });
-  const { disableAnimation = false, margin, shrink: shrinkProp, variant, ...other } = props;
+  const {
+    disableAnimation = false,
+    margin,
+    shrink: shrinkProp,
+    variant,
+    className,
+    ...other
+  } = props;
 
   const muiFormControl = useFormControl();
 
@@ -143,11 +151,13 @@ const InputLabel = React.forwardRef(function InputLabel(inProps, ref) {
   };
 
   const classes = useUtilityClasses(ownerState);
+
   return (
     <InputLabelRoot
       data-shrink={shrink}
       ownerState={ownerState}
       ref={ref}
+      className={clsx(classes.root, className)}
       {...other}
       classes={classes}
     />
@@ -167,6 +177,10 @@ InputLabel.propTypes /* remove-proptypes */ = {
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
   /**
    * The color of the component.
    * It supports both default and custom theme colors, which can be added as shown in the

packages/mui-material/src/InputLabel/InputLabel.test.js

@@ -6,6 +6,7 @@ import FormControl from '@mui/material/FormControl';
 import Input from '@mui/material/Input';
 import FormLabel from '@mui/material/FormLabel';
 import InputLabel, { inputLabelClasses as classes } from '@mui/material/InputLabel';
+import { ClassNames } from '@emotion/react';
 
 describe('<InputLabel />', () => {
   const { render } = createRenderer();
@@ -119,4 +120,46 @@ describe('<InputLabel />', () => {
       });
     });
   });
+
+  describe('Emotion compatibility', () => {
+    it('classes.root should overwrite built-in styles.', () => {
+      const text = 'The label';
+
+      const { getByText } = render(
+        <ClassNames>
+          {({ css }) => (
+            <FormControl>
+              <InputLabel classes={{ root: css({ position: 'static' }) }}>{text}</InputLabel>
+            </FormControl>
+          )}
+        </ClassNames>,
+      );
+      const label = getByText(text);
+
+      expect(getComputedStyle(label).position).to.equal('static');
+    });
+
+    it('className should overwrite classes.root and built-in styles.', () => {
+      const text = 'The label';
+
+      const { getByText } = render(
+        <ClassNames>
+          {({ css }) => (
+            <FormControl>
+              <InputLabel
+                color="primary"
+                className={css({ position: 'static' })}
+                classes={{ root: css({ position: 'sticky' }) }}
+              >
+                {text}
+              </InputLabel>
+            </FormControl>
+          )}
+        </ClassNames>,
+      );
+      const label = getByText(text);
+
+      expect(getComputedStyle(label).position).to.equal('static');
+    });
+  });
 });

packages/mui-material/src/ListItemButton/ListItemButton.js

@@ -136,6 +136,7 @@ const ListItemButton = React.forwardRef(function ListItemButton(inProps, ref) {
     divider = false,
     focusVisibleClassName,
     selected = false,
+    className,
     ...other
   } = props;
 
@@ -180,6 +181,7 @@ const ListItemButton = React.forwardRef(function ListItemButton(inProps, ref) {
         component={(other.href || other.to) && component === 'div' ? 'a' : component}
         focusVisibleClassName={clsx(classes.focusVisible, focusVisibleClassName)}
         ownerState={ownerState}
+        className={clsx(classes.root, className)}
         {...other}
         classes={classes}
       >
@@ -214,6 +216,10 @@ ListItemButton.propTypes /* remove-proptypes */ = {
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.

packages/mui-material/src/MenuItem/MenuItem.js

@@ -156,6 +156,7 @@ const MenuItem = React.forwardRef(function MenuItem(inProps, ref) {
     focusVisibleClassName,
     role = 'menuitem',
     tabIndex: tabIndexProp,
+    className,
     ...other
   } = props;
 
@@ -202,6 +203,7 @@ const MenuItem = React.forwardRef(function MenuItem(inProps, ref) {
         tabIndex={tabIndex}
         component={component}
         focusVisibleClassName={clsx(classes.focusVisible, focusVisibleClassName)}
+        className={clsx(classes.root, className)}
         {...other}
         ownerState={ownerState}
         classes={classes}
@@ -229,6 +231,10 @@ MenuItem.propTypes /* remove-proptypes */ = {
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.

packages/mui-material/src/Radio/Radio.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import { refType } from '@mui/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { alpha } from '@mui/system';
@@ -86,6 +87,7 @@ const Radio = React.forwardRef(function Radio(inProps, ref) {
     name: nameProp,
     onChange: onChangeProp,
     size = 'medium',
+    className,
     ...other
   } = props;
   const ownerState = {
@@ -123,6 +125,7 @@ const Radio = React.forwardRef(function Radio(inProps, ref) {
       checked={checked}
       onChange={onChange}
       ref={ref}
+      className={clsx(classes.root, className)}
       {...other}
     />
   );
@@ -146,6 +149,10 @@ Radio.propTypes /* remove-proptypes */ = {
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
   /**
    * The color of the component.
    * It supports both default and custom theme colors, which can be added as shown in the