feat: support classNames and styles for menu

docs/examples/menuItemGroup.tsx

@@ -8,7 +8,11 @@ import '../../assets/index.less';
 export default () => (
   <div>
     <h2>menu item group</h2>
-    <Menu style={{ margin: 20, width: 300 }} onClick={() => console.log('click')}>
+    <Menu
+      style={{ margin: 20, width: 300 }}
+      onClick={() => console.log('click')}
+      classNames={{ listTitle: 'test-title', list: 'test-list' }}
+    >
       <MenuItemGroup title="group 1" key="2">
         <MenuItem key="21">2</MenuItem>
         <MenuItem key="22">3</MenuItem>

src/Menu.tsx

@@ -30,7 +30,7 @@ import type {
   PopupRender,
 } from './interface';
 import MenuItem from './MenuItem';
-import SubMenu from './SubMenu';
+import SubMenu, { SemanticName } from './SubMenu';
 import { parseItems } from './utils/nodeUtil';
 import { warnItemProp } from './utils/warnUtil';
 
@@ -54,6 +54,8 @@ export interface MenuProps
   extends Omit<React.HTMLAttributes<HTMLUListElement>, 'onClick' | 'onSelect' | 'dir'> {
   prefixCls?: string;
   rootClassName?: string;
+  classNames?: Partial<Record<SemanticName, string>>;
+  styles?: Partial<Record<SemanticName, React.CSSProperties>>;
   items?: ItemType[];
 
   /** @deprecated Please use `items` instead */
@@ -168,6 +170,8 @@ const Menu = React.forwardRef<MenuRef, MenuProps>((props, ref) => {
     rootClassName,
     style,
     className,
+    styles,
+    classNames: menuClassNames,
     tabIndex = 0,
     items,
     children,
@@ -544,7 +548,12 @@ const Menu = React.forwardRef<MenuRef, MenuProps>((props, ref) => {
       : // Need wrap for overflow dropdown that do not response for open
         childList.map((child, index) => (
           // Always wrap provider to avoid sub node re-mount
-          <MenuContextProvider key={child.key} overflowDisabled={index > lastVisibleIndex}>
+          <MenuContextProvider
+            key={child.key}
+            overflowDisabled={index > lastVisibleIndex}
+            classNames={menuClassNames}
+            styles={styles}
+          >
             {child}
           </MenuContextProvider>
         ));
@@ -614,6 +623,8 @@ const Menu = React.forwardRef<MenuRef, MenuProps>((props, ref) => {
         <MenuContextProvider
           prefixCls={prefixCls}
           rootClassName={rootClassName}
+          classNames={menuClassNames}
+          styles={styles}
           mode={internalMode}
           openKeys={mergedOpenKeys}
           rtl={isRtl}

tests/SubMenu.spec.tsx

@@ -2,7 +2,7 @@
 import { act, fireEvent, render } from '@testing-library/react';
 import { resetWarned } from '@rc-component/util/lib/warning';
 import React from 'react';
-import Menu, { MenuItem, MenuItemGroup, SubMenu } from '../src';
+import Menu, { MenuItem, SubMenu } from '../src';
 import { isActive, last } from './util';
 
 jest.mock('@rc-component/trigger', () => {
@@ -483,32 +483,5 @@ describe('SubMenu', () => {
       '150px',
     );
   });
-  it('support classNames and styles', () => {
-    const testClassNames = {
-      list: 'test-list',
-      listTitle: 'test-list-title',
-    };
-    const testStyles = {
-      list: { color: 'red' },
-      listTitle: { color: 'blue' },
-    };
-    const { container } = render(
-      <Menu openKeys={['s1']}>
-        <SubMenu key="s1" title="submenu1" classNames={testClassNames} styles={testStyles}>
-          <MenuItemGroup title="group 1" key="2">
-            <MenuItem key="s1-1">1</MenuItem>
-          </MenuItemGroup>
-        </SubMenu>
-      </Menu>,
-    );
-    fireEvent.mouseEnter(container.querySelector('.rc-menu-submenu-title'));
-    runAllTimer();
-    const list = container.querySelector('.rc-menu-item-group-list');
-    const listTitle = container.querySelector('.rc-menu-item-group-title');
-    expect(list).toHaveClass(testClassNames.list);
-    expect(list).toHaveStyle(testStyles.list);
-    expect(listTitle).toHaveClass(testClassNames.listTitle);
-    expect(listTitle).toHaveStyle(testStyles.listTitle);
-  });
 });
 /* eslint-enable */

tests/semantic.spec.tsx

@@ -0,0 +1,78 @@
+/* eslint-disable no-undef */
+import { act, fireEvent, render } from '@testing-library/react';
+import React from 'react';
+import Menu, { MenuItem, MenuItemGroup, SubMenu } from '../src';
+describe('semantic', () => {
+  function runAllTimer() {
+    for (let i = 0; i < 10; i += 1) {
+      act(() => {
+        jest.runAllTimers();
+      });
+    }
+  }
+  beforeEach(() => {
+    global.triggerProps = null;
+    global.popupTriggerProps = null;
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it('support classNames and styles for subMenu', () => {
+    const testClassNames = {
+      list: 'test-list',
+      listTitle: 'test-list-title',
+    };
+    const testStyles = {
+      list: { color: 'red' },
+      listTitle: { color: 'blue' },
+    };
+    const { container } = render(
+      <Menu openKeys={['s1']}>
+        <SubMenu key="s1" title="submenu1" classNames={testClassNames} styles={testStyles}>
+          <MenuItemGroup title="group 1" key="2">
+            <MenuItem key="s1-1">1</MenuItem>
+          </MenuItemGroup>
+        </SubMenu>
+      </Menu>,
+    );
+    fireEvent.mouseEnter(container.querySelector('.rc-menu-submenu-title'));
+    runAllTimer();
+    const list = container.querySelector('.rc-menu-item-group-list');
+    const listTitle = container.querySelector('.rc-menu-item-group-title');
+    expect(list).toHaveClass(testClassNames.list);
+    expect(list).toHaveStyle(testStyles.list);
+    expect(listTitle).toHaveClass(testClassNames.listTitle);
+    expect(listTitle).toHaveStyle(testStyles.listTitle);
+  });
+  it('support classNames and styles for Menu', () => {
+    const testClassNames = {
+      list: 'test-list',
+      listTitle: 'test-list-title',
+    };
+    const testStyles = {
+      list: { color: 'red' },
+      listTitle: { color: 'blue' },
+    };
+    const { container } = render(
+      <Menu onClick={() => console.log('click')} classNames={testClassNames} styles={testStyles}>
+        <MenuItemGroup title="group 1" key="2">
+          <MenuItem key="21">2</MenuItem>
+          <MenuItem key="22">3</MenuItem>
+        </MenuItemGroup>
+        <MenuItemGroup title="group 2" key="3">
+          <MenuItem key="31">4</MenuItem>
+          <MenuItem key="32">5</MenuItem>
+        </MenuItemGroup>
+      </Menu>,
+    );
+    const list = container.querySelector('.rc-menu-item-group-list');
+    const listTitle = container.querySelector('.rc-menu-item-group-title');
+    expect(list).toHaveClass(testClassNames.list);
+    expect(list).toHaveStyle(testStyles.list);
+    expect(listTitle).toHaveClass(testClassNames.listTitle);
+    expect(listTitle).toHaveStyle(testStyles.listTitle);
+  });
+});