feat: add rootClassName

src/Menu.tsx

@@ -53,7 +53,7 @@ export interface MenuProps
     'onClick' | 'onSelect' | 'dir'
   > {
   prefixCls?: string;
-
+  rootClassName?: string;
   items?: ItemType[];
   /** @deprecated Please use `items` instead */
   children?: React.ReactNode;
@@ -153,6 +153,7 @@ interface LegacyMenuProps extends MenuProps {
 const Menu = React.forwardRef<MenuRef, MenuProps>((props, ref) => {
   const {
     prefixCls = 'rc-menu',
+    rootClassName,
     style,
     className,
     tabIndex = 0,
@@ -518,6 +519,7 @@ const Menu = React.forwardRef<MenuRef, MenuProps>((props, ref) => {
           [`${prefixCls}-inline-collapsed`]: mergedInlineCollapsed,
           [`${prefixCls}-rtl`]: isRtl,
         },
+        rootClassName,
       )}
       dir={direction}
       style={style}
@@ -564,6 +566,7 @@ const Menu = React.forwardRef<MenuRef, MenuProps>((props, ref) => {
       <IdContext.Provider value={uuid}>
         <MenuContextProvider
           prefixCls={prefixCls}
+          rootClassName={rootClassName}
           mode={mergedMode}
           openKeys={mergedOpenKeys}
           rtl={isRtl}

src/SubMenu/PopupTrigger.tsx

@@ -46,6 +46,7 @@ export default function PopupTrigger({
     builtinPlacements,
     triggerSubMenuAction,
     forceSubMenuRender,
+    rootClassName,
 
     // Motion
     motion,
@@ -90,6 +91,7 @@ export default function PopupTrigger({
           [`${prefixCls}-rtl`]: rtl,
         },
         popupClassName,
+        rootClassName,
       )}
       stretch={mode === 'horizontal' ? 'minWidth' : null}
       getPopupContainer={getPopupContainer}

src/context/MenuContext.tsx

@@ -12,6 +12,7 @@ import type {
 
 export interface MenuContextProps {
   prefixCls: string;
+  rootClassName?: string;
   openKeys: string[];
   rtl?: boolean;
 

src/interface.ts

@@ -15,6 +15,8 @@ export interface SubMenuType extends ItemSharedProps {
 
   key: string;
 
+  rootClassName?: string;
+
   // >>>>> Icon
   itemIcon?: RenderIconType;
   expandIcon?: RenderIconType;

tests/SubMenu.spec.js

@@ -439,5 +439,48 @@ describe('SubMenu', () => {
 
     jest.useRealTimers();
   });
+
+  it('should support rootClassName', () => {
+    const wrapper = mount(
+      <Menu rootClassName="custom-className" defaultOpenKeys={['1', '1-1']}>
+        <SubMenu key="1" title="submenu1">
+          <MenuItem key="1-1" role="option">
+            submenu7
+          </MenuItem>
+        </SubMenu>
+        <MenuItem key="2" role="option">
+          2
+        </MenuItem>
+        <MenuItem key="3" role="option">
+          3
+        </MenuItem>
+      </Menu>,
+    );
+    expect(wrapper.render()).toMatchSnapshot();
+
+    expect(
+      wrapper.find('ul.rc-menu-root').at(0).hasClass('custom-className'),
+    ).toBe(true);
+    expect(wrapper.find('.rc-menu-submenu-popup').length).toBe(0);
+
+    act(() => {
+      jest.runAllTimers();
+      wrapper.update();
+    });
+
+    // Enter
+    wrapper.find('.rc-menu-submenu-title').first().simulate('mouseEnter');
+
+    act(() => {
+      jest.runAllTimers();
+      wrapper.update();
+    });
+
+    expect(
+      wrapper.find('.rc-menu-submenu-popup').at(0).hasClass('custom-className'),
+    ).toBe(true);
+
+    expect(wrapper.render()).toMatchSnapshot();
+  });
 });
 /* eslint-enable */

tests/__snapshots__/SubMenu.spec.js.snap

@@ -0,0 +1,131 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SubMenu should support rootClassName 1`] = `
+Array [
+  <ul
+    class="rc-menu rc-menu-root rc-menu-vertical custom-className"
+    data-menu-list="true"
+    role="menu"
+    tabindex="0"
+  >
+    <li
+      class="rc-menu-submenu rc-menu-submenu-vertical rc-menu-submenu-open"
+      role="none"
+    >
+      <div
+        aria-controls="rc-menu-uuid-test-1-popup"
+        aria-expanded="true"
+        aria-haspopup="true"
+        class="rc-menu-submenu-title"
+        data-menu-id="rc-menu-uuid-test-1"
+        role="menuitem"
+        tabindex="-1"
+        title="submenu1"
+      >
+        submenu1
+        <i
+          class="rc-menu-submenu-arrow"
+        />
+      </div>
+    </li>
+    <li
+      aria-selected="false"
+      class="rc-menu-item"
+      data-menu-id="rc-menu-uuid-test-2"
+      role="option"
+      tabindex="-1"
+    >
+      2
+    </li>
+    <li
+      aria-selected="false"
+      class="rc-menu-item"
+      data-menu-id="rc-menu-uuid-test-3"
+      role="option"
+      tabindex="-1"
+    >
+      3
+    </li>
+  </ul>,
+  <div
+    aria-hidden="true"
+    style="display: none;"
+  />,
+]
+`;
+
+exports[`SubMenu should support rootClassName 2`] = `
+Array [
+  <ul
+    class="rc-menu rc-menu-root rc-menu-vertical custom-className"
+    data-menu-list="true"
+    role="menu"
+    tabindex="0"
+  >
+    <li
+      class="rc-menu-submenu rc-menu-submenu-vertical rc-menu-submenu-open rc-menu-submenu-active"
+      role="none"
+    >
+      <div
+        aria-controls="rc-menu-uuid-test-1-popup"
+        aria-expanded="true"
+        aria-haspopup="true"
+        class="rc-menu-submenu-title"
+        data-menu-id="rc-menu-uuid-test-1"
+        role="menuitem"
+        tabindex="-1"
+        title="submenu1"
+      >
+        submenu1
+        <i
+          class="rc-menu-submenu-arrow"
+        />
+      </div>
+      <div>
+        <div
+          class="rc-menu-submenu rc-menu-submenu-popup custom-className"
+          style="opacity: 0; pointer-events: none;"
+        >
+          <ul
+            class="rc-menu rc-menu-sub rc-menu-vertical"
+            data-menu-list="true"
+            id="rc-menu-uuid-test-1-popup"
+          >
+            <li
+              aria-selected="false"
+              class="rc-menu-item"
+              data-menu-id="rc-menu-uuid-test-1-1"
+              role="option"
+              tabindex="-1"
+            >
+              submenu7
+            </li>
+          </ul>
+        </div>
+      </div>
+    </li>
+    <li
+      aria-selected="false"
+      class="rc-menu-item"
+      data-menu-id="rc-menu-uuid-test-2"
+      role="option"
+      tabindex="-1"
+    >
+      2
+    </li>
+    <li
+      aria-selected="false"
+      class="rc-menu-item"
+      data-menu-id="rc-menu-uuid-test-3"
+      role="option"
+      tabindex="-1"
+    >
+      3
+    </li>
+  </ul>,
+  <div
+    aria-hidden="true"
+    style="display: none;"
+  />,
+]
+`;