[button][fab][menu item][list item button] Remove duplicated className entries

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

@@ -580,6 +580,9 @@ const Button = React.forwardRef(function Button(inProps, ref) {
       </span>
     ) : null;
 
+  // Don't forward the 'root' classes to the ButtonBase, as they will get duplicated with the one passed to the className prop.
+  const { root, ...forwardedClasses } = classes;
+
   return (
     <ButtonRoot
       ownerState={ownerState}
@@ -593,7 +596,7 @@ const Button = React.forwardRef(function Button(inProps, ref) {
       type={type}
       id={loading ? loadingId : idProp}
       {...other}
-      classes={classes}
+      classes={forwardedClasses}
     >
       {startIcon}
       {loadingPosition !== 'end' && loader}

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

@@ -149,6 +149,14 @@ describe('<Button />', () => {
     expect(button).not.to.have.attribute('aria-disabled');
   });
 
+  it('does not pass classes.root to ButtonBase classes', () => {
+    render(<Button classes={{ root: 'my-root-class' }}>Hello</Button>);
+    const button = screen.getByRole('button');
+    const classList = button.className.split(' ');
+    // The root class is not duplicated, it should only be applied once via the className prop.
+    expect(classList.filter((c) => c === 'my-root-class')).to.have.length(1);
+  });
+
   it('startIcon and endIcon should have icon class', () => {
     render(
       <Button startIcon={<span>start icon</span>} endIcon={<span>end icon</span>}>

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

@@ -190,6 +190,9 @@ const Fab = React.forwardRef(function Fab(inProps, ref) {
 
   const classes = useUtilityClasses(ownerState);
 
+  // Don't forward the 'root' class to the ButtonBase, as it will get duplicated with the one passed to the className prop.
+  const { root, ...forwardedClasses } = classes;
+
   return (
     <FabRoot
       className={clsx(classes.root, className)}
@@ -201,7 +204,7 @@ const Fab = React.forwardRef(function Fab(inProps, ref) {
       ownerState={ownerState}
       ref={ref}
       {...other}
-      classes={classes}
+      classes={forwardedClasses}
     >
       {children}
     </FabRoot>

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

@@ -147,6 +147,13 @@ describe('<Fab />', () => {
     expect(container.querySelector('button')).to.have.class(disabledClassName);
   });
 
+  it('does not pass classes.root to ButtonBase classes', () => {
+    render(<Fab classes={{ root: 'my-root-class' }}>Fab</Fab>);
+    const button = screen.getByRole('button');
+    const classList = button.className.split(' ');
+    expect(classList.filter((c) => c === 'my-root-class')).to.have.length(1);
+  });
+
   it('should render Icon children with right classes', () => {
     const childClassName = 'child-woof';
     const iconChild = <Icon data-testid="icon" className={childClassName} />;

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

@@ -192,6 +192,9 @@ const ListItemButton = React.forwardRef(function ListItemButton(inProps, ref) {
 
   const classes = useUtilityClasses(ownerState);
 
+  // Don't forward the 'root' class to the ButtonBase, as it will get duplicated with the one passed to the className prop.
+  const { root, ...forwardedClasses } = classes;
+
   const handleRef = useForkRef(listItemRef, ref);
 
   return (
@@ -206,7 +209,7 @@ const ListItemButton = React.forwardRef(function ListItemButton(inProps, ref) {
         ownerState={ownerState}
         className={clsx(classes.root, className)}
         {...other}
-        classes={classes}
+        classes={forwardedClasses}
       >
         {children}
       </ListItemButtonRoot>

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

@@ -35,6 +35,13 @@ describe('<ListItemButton />', () => {
     expect(screen.getByRole('button')).not.to.have.class(classes.gutters);
   });
 
+  it('does not pass classes.root to ButtonBase classes', () => {
+    render(<ListItemButton classes={{ root: 'my-root-class' }}>Item</ListItemButton>);
+    const button = screen.getByRole('button');
+    const classList = button.className.split(' ');
+    expect(classList.filter((c) => c === 'my-root-class')).to.have.length(1);
+  });
+
   describe('context: dense', () => {
     it('should forward the context', () => {
       let context = null;

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

@@ -221,6 +221,9 @@ const MenuItem = React.forwardRef(function MenuItem(inProps, ref) {
 
   const classes = useUtilityClasses(props);
 
+  // Don't forward the 'root' class to the ButtonBase, as it will get duplicated with the one passed to the className prop.
+  const { root, ...forwardedClasses } = classes;
+
   const rovingItemProps = useRovingTabIndexItem({
     id: rovingItemId,
     ref,
@@ -256,7 +259,7 @@ const MenuItem = React.forwardRef(function MenuItem(inProps, ref) {
         className={clsx(classes.root, className)}
         {...other}
         ownerState={ownerState}
-        classes={classes}
+        classes={forwardedClasses}
       />
     </ListContext.Provider>
   );

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

@@ -73,6 +73,17 @@ describe('<MenuItem />', () => {
     expect(screen.queryByRole('option')).not.to.equal(null);
   });
 
+  it('does not pass classes.root to ButtonBase classes', () => {
+    render(
+      <MenuList>
+        <MenuItem classes={{ root: 'my-root-class' }}>Item</MenuItem>
+      </MenuList>,
+    );
+    const menuitem = screen.getByRole('menuitem');
+    const classList = menuitem.className.split(' ');
+    expect(classList.filter((c) => c === 'my-root-class')).to.have.length(1);
+  });
+
   describe('event callbacks', () => {
     /**
      * @type {Array<keyof typeof fireEvent>}