feat: add rootClassName

src/Menu.tsx

@@ -33,15 +33,18 @@ import { useImperativeHandle } from 'react';
 
 /**
  * Menu modify after refactor:
+ *
  * ## Add
- * - disabled
+ *
+ * - Disabled
  *
  * ## Remove
- * - openTransitionName
- * - openAnimation
- * - onDestroy
- * - siderCollapsed: Seems antd do not use this prop (Need test in antd)
- * - collapsedWidth: Seems this logic should be handle by antd Layout.Sider
+ *
+ * - OpenTransitionName
+ * - OpenAnimation
+ * - OnDestroy
+ * - SiderCollapsed: Seems antd do not use this prop (Need test in antd)
+ * - CollapsedWidth: Seems this logic should be handle by antd Layout.Sider
  */
 
 // optimize for render
@@ -54,15 +57,20 @@ export interface MenuProps
   > {
   prefixCls?: string;
 
+  rootClassName?: string;
+
   items?: ItemType[];
   /** @deprecated Please use `items` instead */
   children?: React.ReactNode;
 
   disabled?: boolean;
-  /** @private Disable auto overflow. Pls note the prop name may refactor since we do not final decided. */
+  /**
+   * @private Disable Auto overflow. Pls note the prop name may refactor since
+   *   we do not final decided.
+   */
   disabledOverflow?: boolean;
 
-  /** direction of menu */
+  /** Direction of menu */
   direction?: 'ltr' | 'rtl';
 
   // Mode
@@ -107,7 +115,7 @@ export interface MenuProps
   itemIcon?: RenderIconType;
   expandIcon?: RenderIconType;
   overflowedIndicator?: React.ReactNode;
-  /** @private Internal usage. Do not use in your production. */
+  /** @private Internal Usage. Do not use in your production. */
   overflowedIndicatorPopupClassName?: string;
 
   // >>>>> Function
@@ -118,9 +126,9 @@ export interface MenuProps
   onOpenChange?: (openKeys: string[]) => void;
 
   // >>>>> Internal
-  /***
-   * @private Only used for `pro-layout`. Do not use in your prod directly
-   * and we do not promise any compatibility for this.
+  /**
+   * @private Only Used for `pro-layout`. Do not use in your prod directly and
+   *   we do not promise any compatibility for this.
    */
   _internalRenderMenuItem?: (
     originNode: React.ReactElement,
@@ -129,9 +137,9 @@ export interface MenuProps
       selected: boolean;
     },
   ) => React.ReactElement;
-  /***
-   * @private Only used for `pro-layout`. Do not use in your prod directly
-   * and we do not promise any compatibility for this.
+  /**
+   * @private Only Used for `pro-layout`. Do not use in your prod directly and
+   *   we do not promise any compatibility for this.
    */
   _internalRenderSubMenuItem?: (
     originNode: React.ReactElement,
@@ -153,6 +161,7 @@ interface LegacyMenuProps extends MenuProps {
 const Menu = React.forwardRef<MenuRef, MenuProps>((props, ref) => {
   const {
     prefixCls = 'rc-menu',
+    rootClassName = '',
     style,
     className,
     tabIndex = 0,
@@ -421,9 +430,7 @@ const Menu = React.forwardRef<MenuRef, MenuProps>((props, ref) => {
   };
 
   // ========================= Open =========================
-  /**
-   * Click for item. SubMenu do not have selection status
-   */
+  /** Click for item. SubMenu do not have selection status */
   const onInternalClick = useMemoCallback((info: MenuInfo) => {
     onClick?.(warnItemProp(info));
     triggerSelection(info);
@@ -564,6 +571,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/SubMenu/SubMenuList.tsx

@@ -11,7 +11,7 @@ const InternalSubMenuList = (
   { className, children, ...restProps }: SubMenuListProps,
   ref: React.Ref<HTMLUListElement>,
 ) => {
-  const { prefixCls, mode, rtl } = React.useContext(MenuContext);
+  const { prefixCls, mode, rtl, rootClassName } = React.useContext(MenuContext);
 
   return (
     <ul
@@ -21,6 +21,7 @@ const InternalSubMenuList = (
         `${prefixCls}-sub`,
         `${prefixCls}-${mode === 'inline' ? 'inline' : 'vertical'}`,
         className,
+        rootClassName,
       )}
       {...restProps}
       data-menu-list

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;