[Menu] Add a PopoverClasses property (mui#8884)

pages/api/menu.md

@@ -13,6 +13,7 @@ filename: /src/Menu/Menu.js
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
 | MenuListProps | Object |  | Properties applied to the `MenuList` element. |
+| PopoverClasses | Object |  | `classes` property applied to the `Popover` element. |
 | anchorEl | HTMLElement |  | The DOM element used to set the position of the menu. |
 | children | Node |  | Menu contents, normally `MenuItem`s. |
 | classes | Object |  | Useful to extend the style applied to components. |

src/Menu/Menu.js

@@ -71,6 +71,10 @@ export type Props = {
    * If `true`, the menu is visible.
    */
   open?: boolean,
+  /**
+   * `classes` property applied to the `Popover` element.
+   */
+  PopoverClasses?: Object,
   /**
    * @ignore
    */
@@ -186,12 +190,22 @@ class Menu extends React.Component<ProvidedProps & Props> {
   };
 
   render() {
-    const { children, classes, className, MenuListProps, onEnter, theme, ...other } = this.props;
+    const {
+      children,
+      classes,
+      className,
+      MenuListProps,
+      onEnter,
+      PopoverClasses,
+      theme,
+      ...other
+    } = this.props;
 
     return (
       <Popover
         getContentAnchorEl={this.getContentAnchorEl}
         className={classNames(classes.root, className)}
+        classes={PopoverClasses}
         onEnter={this.handleEnter}
         anchorOrigin={theme.direction === 'rtl' ? rtlOrigin : ltrOrigin}
         transformOrigin={theme.direction === 'rtl' ? rtlOrigin : ltrOrigin}

src/Menu/Menu.spec.js

@@ -49,6 +49,13 @@ describe('<Menu />', () => {
     assert.strictEqual(wrapper.hasClass(classes.root), true, 'should be classes.root');
   });
 
+  describe('prop: PopoverClasses', () => {
+    it('should be able to change the Popover style', () => {
+      const wrapper = shallow(<Menu PopoverClasses={{ foo: 'bar' }} />);
+      assert.strictEqual(wrapper.props().classes.foo, 'bar');
+    });
+  });
+
   it('should pass the instance function `getContentAnchorEl` to Popover', () => {
     const wrapper = shallow(<Menu />);
     assert.strictEqual(