fix: Menu a color (#23832)

* fix: Menu a color

* update snapshot

* fix menu item

components/menu/__tests__/__snapshots__/demo.test.js.snap

@@ -1021,6 +1021,41 @@ Array [
       </div>
       <div />
     </li>
+    <li
+      class="ant-menu-item"
+      role="menuitem"
+      style="padding-left:24px"
+    >
+      <span
+        aria-label="link"
+        class="anticon anticon-link"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="link"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M574 665.4a8.03 8.03 0 00-11.3 0L446.5 781.6c-53.8 53.8-144.6 59.5-204 0-59.5-59.5-53.8-150.2 0-204l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3l-39.8-39.8a8.03 8.03 0 00-11.3 0L191.4 526.5c-84.6 84.6-84.6 221.5 0 306s221.5 84.6 306 0l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3L574 665.4zm258.6-474c-84.6-84.6-221.5-84.6-306 0L410.3 307.6a8.03 8.03 0 000 11.3l39.7 39.7c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c53.8-53.8 144.6-59.5 204 0 59.5 59.5 53.8 150.2 0 204L665.3 562.6a8.03 8.03 0 000 11.3l39.8 39.8c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c84.5-84.6 84.5-221.5 0-306.1zM610.1 372.3a8.03 8.03 0 00-11.3 0L372.3 598.7a8.03 8.03 0 000 11.3l39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l226.4-226.4c3.1-3.1 3.1-8.2 0-11.3l-39.5-39.6z"
+          />
+        </svg>
+      </span>
+      <span>
+        <a
+          href="https://ant.design"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          Ant Design
+        </a>
+      </span>
+    </li>
   </ul>,
 ]
 `;

components/menu/demo/switch-mode.md

@@ -20,6 +20,7 @@ import {
   CalendarOutlined,
   AppstoreOutlined,
   SettingOutlined,
+  LinkOutlined,
 } from '@ant-design/icons';
 
 const { SubMenu } = Menu;
@@ -77,6 +78,11 @@ class Sider extends React.Component {
             <Menu.Item key="9">Option 9</Menu.Item>
             <Menu.Item key="10">Option 10</Menu.Item>
           </SubMenu>
+          <Menu.Item key="link" icon={<LinkOutlined />}>
+            <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
+              Ant Design
+            </a>
+          </Menu.Item>
         </Menu>
       </>
     );

components/menu/style/index.less

@@ -58,10 +58,7 @@
     transition: background 0.3s @ease-in-out, padding 0.3s @ease-in-out;
   }
 
-  &-item > a {
+  &-item a {
-    &:only-child {
-      display: block;
-    }
     color: @menu-item-color;
     &:hover {
       color: @menu-highlight-color;
@@ -78,7 +75,7 @@
   }
 
   // https://github.com/ant-design/ant-design/issues/19809
-  &-item > .@{ant-prefix}-badge > a {
+  &-item > .@{ant-prefix}-badge a {
     color: @menu-item-color;
     &:hover {
       color: @menu-highlight-color;
@@ -113,8 +110,8 @@
 
   &-item-selected {
     color: @menu-highlight-color;
-    > a,
+    a,
-    > a:hover {
+    a:hover {
       color: @menu-highlight-color;
     }
   }
@@ -323,7 +320,7 @@
   &-vertical-left &-submenu-selected,
   &-vertical-right &-submenu-selected {
     color: @menu-highlight-color;
-    > a {
+    a {
       color: @menu-highlight-color;
     }
   }
@@ -353,10 +350,7 @@
     }
 
     > .@{menu-prefix-cls}-item {
-      > a {
+      a {
-        &:only-child {
-          display: block;
-        }
         color: @menu-item-color;
         &:hover {
           color: @menu-highlight-color;
@@ -365,7 +359,7 @@
           bottom: -2px;
         }
       }
-      &-selected > a {
+      &-selected a {
         color: @menu-highlight-color;
       }
     }
@@ -545,7 +539,7 @@
     background: none;
     border-color: transparent !important;
     cursor: not-allowed;
-    > a {
+    a {
       color: @disabled-color !important;
       pointer-events: none;
     }