[Select] Fix PopoverClasses being overriding

mui · Dec 8, 2022 · 7ff5c08 · 7ff5c08
1 parent 39f5143
commit 7ff5c08
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/packages/mui-material/src/Menu/Menu.js b/packages/mui-material/src/Menu/Menu.js
@@ -158,7 +158,6 @@ const Menu = React.forwardRef(function Menu(inProps, ref) {
 
   return (
     <MenuRoot
-      classes={PopoverClasses}
       onClose={onClose}
       anchorOrigin={{
         vertical: 'bottom',
@@ -180,6 +179,7 @@ const Menu = React.forwardRef(function Menu(inProps, ref) {
       TransitionProps={{ onEntering: handleEntering, ...TransitionProps }}
       ownerState={ownerState}
       {...other}
+      classes={PopoverClasses}
     >
       <MenuMenuList
         onKeyDown={handleListKeyDown}

diff --git a/packages/mui-material/src/Menu/Menu.test.js b/packages/mui-material/src/Menu/Menu.test.js
@@ -111,6 +111,19 @@ describe('<Menu />', () => {
 
       expect(screen.getByTestId('paper')).to.have.class('bar');
     });
+
+    it('should be able to change the root element style', () => {
+      render(
+        <Menu
+          anchorEl={document.createElement('div')}
+          open
+          PaperProps={{ 'data-testid': 'paper' }}
+          PopoverClasses={{ root: 'foo' }}
+        />,
+      );
+
+      expect(screen.getByTestId('paper').parentElement).to.have.class('foo');
+    });
   });
 
   it('should pass onClose prop to Popover', () => {