@kdcloudjs/kdesign 1.3.8 → 1.4.1

package/lib/menu/menuItem.js

@@ -17,8 +17,12 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/toConsumableArray"));
+
 var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
 
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
 var React = _interopRequireWildcard(require("react"));
 
 var _configProvider = require("../config-provider");
@@ -52,7 +56,7 @@ var MENU_ITEM_CONTAINER_NAME = 'menu-item-content-container';
 exports.MENU_ITEM_CONTAINER_NAME = MENU_ITEM_CONTAINER_NAME;
 
 var InternalMenuItem = function InternalMenuItem(props, ref) {
-  var _classNames;
+  var _context, _classNames;
 
   var _React$useContext = React.useContext(_configProvider.ConfigContext),
       getPrefixCls = _React$useContext.getPrefixCls,
@@ -71,6 +75,7 @@ var InternalMenuItem = function InternalMenuItem(props, ref) {
       collapsed = _a.collapsed,
       keyValue = _a.keyValue,
       selectedKey = _a.selectedKey,
+      setSelectedKeyPath = _a.setSelectedKeyPath,
       subMenuMode = _a.subMenuMode,
       inlineIndent = _a.inlineIndent,
       className = _a.className,
@@ -78,11 +83,13 @@ var InternalMenuItem = function InternalMenuItem(props, ref) {
       _a$paddingLeft = _a.paddingLeft,
       paddingLeft = _a$paddingLeft === void 0 ? 0 : _a$paddingLeft,
       style = _a.style,
-      restProps = __rest(_a, ["prefixCls", "icon", "mode", "level", "disabled", "children", "collapsed", "keyValue", "selectedKey", "subMenuMode", "inlineIndent", "className", "handleOnClick", "paddingLeft", "style"]);
+      parentPath = _a.parentPath,
+      restProps = __rest(_a, ["prefixCls", "icon", "mode", "level", "disabled", "children", "collapsed", "keyValue", "selectedKey", "setSelectedKeyPath", "subMenuMode", "inlineIndent", "className", "handleOnClick", "paddingLeft", "style", "parentPath"]);
 
   (0, _devwarning.default)(!keyValue && keyValue !== 0, 'menuitem', 'cannot found children in Menu.Item');
   var prefixCls = getPrefixCls(pkgPrefixCls, 'menu-item', customPrefixcls);
   var menuItemRef = ref || /*#__PURE__*/React.createRef();
+  var menuItemParentPath = Array.isArray(parentPath) ? (0, _concat.default)(_context = []).call(_context, (0, _toConsumableArray2.default)(parentPath), [keyValue]) : [keyValue];
 
   var renderItemChildren = function renderItemChildren(children) {
     if (typeof children === 'string') {
@@ -115,7 +122,7 @@ var InternalMenuItem = function InternalMenuItem(props, ref) {
     e.stopPropagation();
     var info = {
       key: keyValue,
-      keyPath: [keyValue],
+      keyPath: menuItemParentPath,
       domEvent: e.nativeEvent
     };
     handleOnClick(info);
@@ -159,6 +166,11 @@ var InternalMenuItem = function InternalMenuItem(props, ref) {
     return renderItemChildren(children);
   };
 
+  React.useEffect(function () {
+    if (selectedKey && selectedKey === keyValue) {
+      setSelectedKeyPath(menuItemParentPath);
+    }
+  }, [selectedKey]);
   return /*#__PURE__*/React.createElement("li", (0, _extends2.default)({
     ref: menuItemRef,
     className: (0, _classnames.default)(className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, prefixCls, subMenuMode !== 'horizontal'), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-collapsed"), collapsed && level === 1), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-active"), selectedKey === keyValue), _classNames)),

package/lib/menu/style/index.css

@@ -104,41 +104,66 @@
 /* 多行显示省略号 */
 /* 单行显示省略号 */
 /** 浮层箭头样式 **/
-.hover {
+.menu-dark-hover {
   background-color: var(--kd-c-menu-sub-color-background, #121319);
   color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
 }
-.light-hover {
-  background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
-  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
+.menu-dark-active {
+  background-color: var(--kd-c-menu-sub-color-background, #121319);
+  color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
 }
-.light-active {
-  background-color: var(--kd-c-menu-light-color-background-active, #e3ebff);
-  color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3));
+.menu-dark-active-inline-title {
+  color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
+  background: var(--kd-c-menu-color-background, #343848);
+  border: none;
 }
-.light-default {
+.menu-light-base {
   color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
   background: #ffffff;
 }
-.light {
-  color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
-  background: #ffffff;
+.menu-light-base .kd-menu-item-disabled,
+.menu-light-base .kd-menu-submenu-disabled {
+  background-color: #fff;
 }
-.light .kd-menu-submenu-hover,
-.light .kd-menu-submenu-sub {
+.menu-light-base .kd-menu-submenu-sub {
   color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
-  background: #ffffff;
+  background: #fafafa;
 }
-.light .kd-menu-submenu-title:hover {
+.menu-light-base .kd-menu-item:not(.kd-menu-item-disabled):not(.kd-menu-item-active):hover {
+  background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
   color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
+  border: none;
 }
-.light .kd-menu-submenu:not(.kd-menu-submenu-disabled):hover {
+.menu-light-base .kd-menu-item-hover,
+.menu-light-base .kd-menu-submenu-hover {
   background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
   color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
+  border: none;
+}
+.menu-light-base .kd-menu-item-active,
+.menu-light-base .kd-menu-submenu-active {
+  background-color: var(--kd-c-menu-light-color-background-active, #e3ebff);
+  color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3));
+  border: none;
 }
-.light .kd-menu-item:not(.kd-menu-item-disabled):hover {
+.menu-light-default {
+  color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
+  background: #ffffff;
+}
+.menu-light-hover {
   background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
   color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
+  border: none;
+}
+.menu-light-active {
+  background-color: var(--kd-c-menu-light-color-background-active, #e3ebff);
+  color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3));
+  border: none;
+}
+.menu-light-active-inline-title {
+  color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3));
+  background: #ffffff;
+  border: none;
 }
 .kd-menu {
   position: relative;
@@ -153,58 +178,13 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.kd-menu-inline .kd-menu-item-active {
-  color: var(--kd-c-menu-inline-color-active, var(--kd-g-color-white, #fff));
-}
 .kd-menu-inline .kd-menu-submenu {
   padding-right: 0;
 }
-.kd-menu-inline .kd-menu-submenu:not(.kd-menu-submenu-disabled):hover {
-  color: var(--kd-c-menu-inline-color-active, var(--kd-g-color-white, #fff));
-}
 .kd-menu-collapsed {
   width: 50px;
   min-width: auto;
 }
-.kd-menu-vertical .kd-menu-submenu:not(.kd-menu-submenu-disabled):hover,
-.kd-menu-vertical .kd-menu-submenu-hover {
-  background-color: var(--kd-c-menu-sub-color-background, #121319);
-  color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
-}
-.kd-menu-light {
-  color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
-  background: #ffffff;
-}
-.kd-menu-light .kd-menu-submenu-hover,
-.kd-menu-light .kd-menu-submenu-sub {
-  color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
-  background: #ffffff;
-}
-.kd-menu-light .kd-menu-submenu-title:hover {
-  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
-}
-.kd-menu-light .kd-menu-submenu:not(.kd-menu-submenu-disabled):hover {
-  background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
-  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
-}
-.kd-menu-light .kd-menu-item:not(.kd-menu-item-disabled):hover {
-  background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
-  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
-}
-.kd-menu-light.kd-menu-vertical .kd-menu-submenu-sub {
-  -webkit-box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
-          box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
-}
-.kd-menu-light.kd-menu-vertical .kd-menu-item:not(.kd-menu-item-disabled):not(.kd-menu-item-active):hover {
-  background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
-  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
-  border: none;
-}
-.kd-menu-light.kd-menu-vertical .kd-menu-item-active {
-  color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3));
-  background-color: var(--kd-c-menu-light-color-background-active, #e3ebff);
-  border: none !important;
-}
 .kd-menu-item {
   position: relative;
   cursor: pointer;
@@ -231,8 +211,6 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-}
-.kd-menu-item-title > span {
   opacity: 1;
   -webkit-transition: opacity calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
   transition: opacity calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
@@ -259,10 +237,7 @@
 .kd-menu-item-disabled {
   cursor: not-allowed;
   color: var(--kd-c-menu-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
-}
-.kd-menu-item-active {
-  background-color: var(--kd-c-menu-sub-color-background, #121319);
-  color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
+  background-color: var(--kd-c-menu-color-background, #343848);
 }
 .kd-menu-item-arrow {
   margin-left: auto;
@@ -284,10 +259,6 @@
   transition: transform calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
   transition: transform calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
 }
-.kd-menu-item:not(.kd-menu-item-disabled):hover {
-  background-color: var(--kd-c-menu-sub-color-background, #121319);
-  color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
-}
 .kd-menu-submenu {
   position: static;
   cursor: pointer;
@@ -314,8 +285,6 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-}
-.kd-menu-submenu-title > span {
   opacity: 1;
   -webkit-transition: opacity calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
   transition: opacity calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
@@ -342,10 +311,7 @@
 .kd-menu-submenu-disabled {
   cursor: not-allowed;
   color: var(--kd-c-menu-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
-}
-.kd-menu-submenu-active {
-  background-color: var(--kd-c-menu-sub-color-background, #121319);
-  color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
+  background-color: var(--kd-c-menu-color-background, #343848);
 }
 .kd-menu-submenu-arrow {
   margin-left: auto;
@@ -367,13 +333,8 @@
   transition: transform calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
   transition: transform calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
 }
-.kd-menu-submenu-hover {
-  background-color: var(--kd-c-menu-sub-color-background, #121319);
-  color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
-}
 .kd-menu-submenu-sub {
   line-height: var(--kd-c-menu-item-sizing-height, 50px);
-  color: var(--kd-c-menu-sub-color-text, rgba(255, 255, 255, 0.65));
 }
 .kd-menu-submenu-thrid {
   display: -webkit-box;
@@ -468,18 +429,78 @@
   color: var(--kd-c-menu-sub-color-text-active, var(--kd-g-color-white, #fff));
 }
 .kd-menu-dark .kd-menu-submenu-sub {
+  color: var(--kd-c-menu-sub-color-text, rgba(255, 255, 255, 0.65));
   background: var(--kd-c-menu-sub-inline-color-background, #1f212b);
 }
 .kd-menu-dark .kd-menu-submenu-sub-second,
 .kd-menu-dark .kd-menu-submenu-sub-third {
   background: var(--kd-c-menu-sub-color-background, #121319);
 }
-.kd-menu-light .kd-menu-submenu-active,
-.kd-menu-light .kd-menu-item-active {
+.kd-menu-dark .kd-menu-item:not(.kd-menu-item-disabled):not(.kd-menu-item-active):hover {
+  background-color: var(--kd-c-menu-sub-color-background, #121319);
+  color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
+}
+.kd-menu-dark .kd-menu-item-active {
+  background-color: var(--kd-c-menu-sub-color-background, #121319);
+  color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
+}
+.kd-menu-dark .kd-menu-item-active,
+.kd-menu-dark .kd-menu-submenu-active {
+  background-color: var(--kd-c-menu-sub-color-background, #121319);
+  color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
+}
+.kd-menu-dark .kd-menu-item-hover,
+.kd-menu-dark .kd-menu-submenu-hover {
+  background-color: var(--kd-c-menu-sub-color-background, #121319);
+  color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
+}
+.kd-menu-inline.kd-menu-dark .kd-menu-item-active .kd-menu-submenu-title,
+.kd-menu-inline.kd-menu-dark .kd-menu-submenu-active .kd-menu-submenu-title {
+  color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
+  background: var(--kd-c-menu-color-background, #343848);
+  border: none;
+}
+.kd-menu-inline.kd-menu-dark .kd-menu-submenu:not(.kd-menu-submenu-disabled):not(.kd-menu-submenu-active) > .kd-menu-submenu-title:hover {
+  color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
+  background: var(--kd-c-menu-color-background, #343848);
+  border: none;
+}
+.kd-menu-light {
+  color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
+  background: #ffffff;
+}
+.kd-menu-light .kd-menu-item-disabled,
+.kd-menu-light .kd-menu-submenu-disabled {
+  background-color: #fff;
+}
+.kd-menu-light .kd-menu-submenu-sub {
+  color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
+  background: #fafafa;
+}
+.kd-menu-light .kd-menu-item:not(.kd-menu-item-disabled):not(.kd-menu-item-active):hover {
+  background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
+  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
+  border: none;
+}
+.kd-menu-light .kd-menu-item-hover,
+.kd-menu-light .kd-menu-submenu-hover {
+  background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
+  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
+  border: none;
+}
+.kd-menu-light .kd-menu-item-active,
+.kd-menu-light .kd-menu-submenu-active {
   background-color: var(--kd-c-menu-light-color-background-active, #e3ebff);
   color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3));
+  border: none;
 }
-.kd-menu-popper .kd-menu-submenu:not(.kd-menu-submenu-disabled):hover,
+.kd-menu-inline.kd-menu-light .kd-menu-item-active .kd-menu-submenu-title,
+.kd-menu-inline.kd-menu-light .kd-menu-submenu-active .kd-menu-submenu-title {
+  color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3));
+  background: #ffffff;
+  border: none;
+}
+.kd-menu-popper .kd-menu-submenu:not(.kd-menu-submenu-disabled):not(.kd-menu-submenu-active):hover,
 .kd-menu-popper .kd-menu-submenu-hover {
   background-color: var(--kd-c-menu-sub-color-background, #121319);
   color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
@@ -501,11 +522,15 @@
   padding-right: 0;
 }
 .kd-menu-popper .kd-menu-submenu-sub {
+  color: var(--kd-c-menu-sub-color-text, rgba(255, 255, 255, 0.65));
   background: var(--kd-c-menu-sub-inline-color-background, #1f212b);
+  -webkit-box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+          box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
 }
-.kd-menu-popper .kd-menu-submenu-sub .kd-menu-item:hover,
+.kd-menu-popper .kd-menu-submenu-sub .kd-menu-item:not(.kd-menu-item-disabled):not(.kd-menu-item-active):hover,
 .kd-menu-popper .kd-menu-submenu-sub .kd-menu-item-active {
-  color: var(--kd-c-menu-sub-color-text-active, var(--kd-g-color-white, #fff));
+  background-color: var(--kd-c-menu-sub-color-background, #121319);
+  color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
 }
 .kd-menu-popper .kd-menu-submenu-sub-second,
 .kd-menu-popper .kd-menu-submenu-sub-third {
@@ -536,28 +561,15 @@
   color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
   background: #ffffff;
 }
-.kd-menu-popper.light .kd-menu-submenu-hover,
-.kd-menu-popper.light .kd-menu-submenu-sub {
-  color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
-  background: #ffffff;
-}
-.kd-menu-popper.light .kd-menu-submenu-title:hover {
-  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
-}
-.kd-menu-popper.light .kd-menu-submenu:not(.kd-menu-submenu-disabled):hover {
-  background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
-  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
-}
-.kd-menu-popper.light .kd-menu-item:not(.kd-menu-item-disabled):hover {
-  background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
-  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
+.kd-menu-popper.light .kd-menu-item-disabled,
+.kd-menu-popper.light .kd-menu-submenu-disabled {
+  background-color: #fff;
 }
 .kd-menu-popper.light .kd-menu-submenu-sub {
-  -webkit-box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
-          box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
+  background: #fafafa;
 }
-.kd-menu-popper.light .kd-menu-item:not(.kd-menu-item-disabled):not(.kd-menu-item-active):hover,
-.kd-menu-popper.light .kd-menu-submenu:not(.kd-menu-submenu-disabled):hover {
+.kd-menu-popper.light .kd-menu-item:not(.kd-menu-item-disabled):not(.kd-menu-item-active):hover {
   background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
   color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
   border: none;

package/lib/menu/style/index.less

@@ -6,6 +6,8 @@
 @menuitem-prefix-cls: ~'@{menu-prefix-cls}-item';
 @menu-dark-prefix-cls: ~'@{menu-prefix-cls}-dark';
 @menu-light-prefix-cls: ~'@{menu-prefix-cls}-light';
+@menu-vertical-prefix-cls: ~'@{menu-prefix-cls}-vertical';
+@menu-inline-prefix-cls: ~'@{menu-prefix-cls}-inline';
 @menu-popper-prefix-cls: ~'@{menu-prefix-cls}-popper';
 @submenu-prefix-cls: ~'@{menu-prefix-cls}-submenu';
 
@@ -15,56 +17,17 @@
   &-inline {
     .@{menuitem-prefix-cls} {
       .ellipsis();
-
-      &-active {
-        color: @menu-inline-color-active;
-      }
     }
 
     .@{submenu-prefix-cls} {
       padding-right: 0;
     }
-
-    .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled):hover {
-      color: @menu-inline-color-active;
-    }
   }
 
   &-collapsed {
     width: 50px;
     min-width: auto;
   }
-
-  &-vertical {
-    .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled):hover,
-    .@{submenu-prefix-cls}-hover {
-      .hover();
-    }
-  }
-
-  &-light {
-    .light()
-  }
-
-  &-light&-vertical {
-    .@{submenu-prefix-cls}-sub {
-      box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
-      0 9px 28px 8px rgba(0, 0, 0, 0.05);
-    }
-
-    .@{menuitem-prefix-cls} {
-      &:not(.@{menuitem-prefix-cls}-disabled):not(.@{menuitem-prefix-cls}-active):hover {
-        .light-hover();
-        border: none;
-      }
-
-      &-active {
-        color: @menu-light-color-active;
-        background-color: @menu-light-color-background-active;
-        border: none !important;
-      }
-    }
-  }
 }
 
 .@{menuitem-prefix-cls} {
@@ -73,10 +36,6 @@
   transition: color, background-color;
   transition-duration: calc(@menu-motion-duration - 0.1s);
   transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
-
-  &:not(&-disabled):hover {
-    .hover();
-  }
 }
 
 .@{submenu-prefix-cls} {
@@ -86,13 +45,8 @@
   transition-duration: calc(@menu-motion-duration - 0.1s);
   transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
 
-  &-hover {
-    .hover();
-  }
-
   &-sub {
     line-height: @menu-item-height;
-    color: @menu-sub-color;
   }
 
   &-thrid {
@@ -168,26 +122,68 @@
   }
 }
 
+// dark
 .@{menu-dark-prefix-cls} {
+
   .@{submenu-prefix-cls}-sub {
+    color: @menu-sub-color;
     background: @menu-sub-inline-color-background;
   }
 
   .@{submenu-prefix-cls}-sub-second, .@{submenu-prefix-cls}-sub-third {
     background: @menu-sub-color-background;
   }
+
+  .@{menuitem-prefix-cls} {
+    &:not(.@{menuitem-prefix-cls}-disabled):not(.@{menuitem-prefix-cls}-active):hover {
+      .menu-dark-hover();
+    }
+
+    &-active {
+      .menu-dark-active()
+    }
+  }
+
+  .@{menuitem-prefix-cls}-active, .@{submenu-prefix-cls}-active {
+    .menu-dark-active()
+  }
+
+  .@{menuitem-prefix-cls}-hover, .@{submenu-prefix-cls}-hover {
+    .menu-dark-hover()
+  }
 }
 
+.@{menu-inline-prefix-cls}.@{menu-dark-prefix-cls} {
+  .@{menuitem-prefix-cls}-active, .@{submenu-prefix-cls}-active {
+    .@{submenu-prefix-cls}-title {
+      .menu-dark-active-inline-title()
+    }
+  }
+
+  .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled):not(.@{submenu-prefix-cls}-active) {
+    > .@{submenu-prefix-cls}-title:hover {
+      .menu-dark-active-inline-title()
+    }
+  }
+}
+
+// light
 .@{menu-light-prefix-cls} {
-  .@{submenu-prefix-cls}-active,.@{menuitem-prefix-cls}-active {
-    .light-active()
+  .menu-light-base();
+}
+
+.@{menu-inline-prefix-cls}.@{menu-light-prefix-cls} {
+  .@{menuitem-prefix-cls}-active, .@{submenu-prefix-cls}-active {
+    .@{submenu-prefix-cls}-title {
+      .menu-light-active-inline-title()
+    }
   }
 }
 
 .@{menu-popper-prefix-cls} {
-  .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled):hover,
+  .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled):not(.@{submenu-prefix-cls}-active):hover,
   .@{submenu-prefix-cls}-hover {
-    .hover();
+    .menu-dark-hover();
   }
 
   &.hidden {
@@ -204,12 +200,15 @@
     padding-right: 0;
 
     &-sub {
+      color: @menu-sub-color;
       background: @menu-sub-inline-color-background;
+      box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
+      0 9px 28px 8px rgba(0, 0, 0, 0.05);
 
       .@{menuitem-prefix-cls} {
-        &:hover,
+        &:not(.@{menuitem-prefix-cls}-disabled):not(.@{menuitem-prefix-cls}-active):hover,
         &-active {
-          color: @menu-sub-color-active;
+          .menu-dark-hover()
         }
       }
 
@@ -235,28 +234,7 @@
   }
 
   &.light {
-    .light();
-
-    .@{submenu-prefix-cls}-sub {
-      box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
-      0 9px 28px 8px rgba(0, 0, 0, 0.05);
-    }
-
-    .@{menuitem-prefix-cls}:not(.@{menuitem-prefix-cls}-disabled):not(.@{menuitem-prefix-cls}-active):hover,
-    .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled):hover {
-      .light-hover();
-      border: none;
-    }
-
-    .@{menuitem-prefix-cls}-hover,.@{submenu-prefix-cls}-hover {
-      .light-hover();
-      border: none;
-    }
-
-    .@{menuitem-prefix-cls}-active,.@{submenu-prefix-cls}-active {
-      .light-active();
-      border: none;
-    }
+    .menu-light-base();
   }
 }