fix: wrap item label when extra exists

Author: QDyanbing

src/utils/nodeUtil.tsx

@@ -48,11 +48,17 @@ function convertItemsToNodes(
           return <MergedDivider key={mergedKey} {...restProps} />;
         }
 
+        const hasExtra = !!extra || extra === 0;
+
         return (
           <MergedMenuItem key={mergedKey} {...restProps} extra={extra}>
-            {label}
-            {(!!extra || extra === 0) && (
-              <span className={`${prefixCls}-item-extra`}>{extra}</span>
+            {hasExtra ? (
+              <>
+                <span className={`${prefixCls}-item-label`}>{label}</span>
+                <span className={`${prefixCls}-item-extra`}>{extra}</span>
+              </>
+            ) : (
+              label
             )}
           </MergedMenuItem>
         );

tests/__snapshots__/MenuItem.spec.tsx.snap

@@ -22,7 +22,11 @@ exports[`MenuItem overwrite default role should set extra to group option 1`] =
       role="menuitem"
       tabindex="-1"
     >
-      Menu Item 1
+      <span
+        class="rc-menu-item-label"
+      >
+        Menu Item 1
+      </span>
       <span
         class="rc-menu-item-extra"
       >
@@ -40,7 +44,11 @@ exports[`MenuItem overwrite default role should set extra to option 1`] = `
   role="menuitem"
   tabindex="-1"
 >
-  Top Menu Item
+  <span
+    class="rc-menu-item-label"
+  >
+    Top Menu Item
+  </span>
   <span
     class="rc-menu-item-extra"
   >