[Select] Fix PopoverClasses being overriding

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

Hide file tree

Showing 2 changed files with 35 additions and 22 deletions.
diff --git a/packages/mui-material/src/Menu/Menu.js b/packages/mui-material/src/Menu/Menu.js
@@ -158,28 +158,28 @@ const Menu = React.forwardRef(function Menu(inProps, ref) {
 
   return (
     <MenuRoot
-      classes={PopoverClasses}
-      onClose={onClose}
-      anchorOrigin={{
-        vertical: 'bottom',
-        horizontal: isRtl ? 'right' : 'left',
-      }}
-      transformOrigin={isRtl ? RTL_ORIGIN : LTR_ORIGIN}
-      PaperProps={{
-        component: MenuPaper,
-        ...PaperProps,
-        classes: {
-          ...PaperProps.classes,
-          root: classes.paper,
-        },
-      }}
-      className={classes.root}
-      open={open}
-      ref={ref}
-      transitionDuration={transitionDuration}
-      TransitionProps={{ onEntering: handleEntering, ...TransitionProps }}
-      ownerState={ownerState}
-      {...other}
+    onClose={onClose}
+    anchorOrigin={{
+      vertical: 'bottom',
+      horizontal: isRtl ? 'right' : 'left',
+    }}
+    transformOrigin={isRtl ? RTL_ORIGIN : LTR_ORIGIN}
+    PaperProps={{
+      component: MenuPaper,
+      ...PaperProps,
+      classes: {
+        ...PaperProps.classes,
+        root: classes.paper,
+      },
+    }}
+    className={classes.root}
+    open={open}
+    ref={ref}
+    transitionDuration={transitionDuration}
+    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', () => {