@ant-design/pro-components 3.0.2-0 → 3.1.1-0

package/es/layout/components/SiderMenu/style/index.js

@@ -1,8 +1,6 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { Keyframes } from '@ant-design/cssinjs';
 import { useStyle as useAntdStyle } from "../../../../provider";
-export var proLayoutTitleHide = new Keyframes('antBadgeLoadingCircle', {
+export const proLayoutTitleHide = new Keyframes('antBadgeLoadingCircle', {
   '0%': {
     display: 'none',
     opacity: 0,
@@ -16,170 +14,190 @@ export var proLayoutTitleHide = new Keyframes('antBadgeLoadingCircle', {
     opacity: 1
   }
 });
-var genSiderMenuStyle = function genSiderMenuStyle(token) {
-  var _token$layout, _token$layout2, _token$layout3, _token$layout4, _token$layout5, _token$layout6, _token$layout7, _token$layout8, _token$layout9, _token$layout10, _token$layout11, _token$layout12;
-  return _defineProperty({}, "".concat(token.proComponentsCls, "-layout"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(token.antCls, "-layout-sider").concat(token.componentCls), {
-    background: ((_token$layout = token.layout) === null || _token$layout === void 0 || (_token$layout = _token$layout.sider) === null || _token$layout === void 0 ? void 0 : _token$layout.colorMenuBackground) || 'transparent'
-  }), token.componentCls, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
-    position: 'relative',
-    boxSizing: 'border-box',
-    '&-menu': {
-      position: 'relative',
-      zIndex: 10,
-      minHeight: '100%'
-    }
-  }, "& ".concat(token.antCls, "-layout-sider-children"), {
-    position: 'relative',
-    display: 'flex',
-    flexDirection: 'column',
-    height: '100%',
-    paddingInline: (_token$layout2 = token.layout) === null || _token$layout2 === void 0 || (_token$layout2 = _token$layout2.sider) === null || _token$layout2 === void 0 ? void 0 : _token$layout2.paddingInlineLayoutMenu,
-    paddingBlock: (_token$layout3 = token.layout) === null || _token$layout3 === void 0 || (_token$layout3 = _token$layout3.sider) === null || _token$layout3 === void 0 ? void 0 : _token$layout3.paddingBlockLayoutMenu,
-    borderInlineEnd: "1px solid ".concat(token.colorSplit),
-    marginInlineEnd: -1
-  }), "".concat(token.antCls, "-menu"), _defineProperty(_defineProperty({}, "".concat(token.antCls, "-menu-item-group-title"), {
-    fontSize: token.fontSizeSM,
-    paddingBottom: 4
-  }), "".concat(token.antCls, "-menu-item:not(").concat(token.antCls, "-menu-item-selected):hover"), {
-    color: (_token$layout4 = token.layout) === null || _token$layout4 === void 0 || (_token$layout4 = _token$layout4.sider) === null || _token$layout4 === void 0 ? void 0 : _token$layout4.colorTextMenuItemHover
-  })), '&-logo', {
-    position: 'relative',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingInline: 12,
-    paddingBlock: 16,
-    color: (_token$layout5 = token.layout) === null || _token$layout5 === void 0 || (_token$layout5 = _token$layout5.sider) === null || _token$layout5 === void 0 ? void 0 : _token$layout5.colorTextMenu,
-    cursor: 'pointer',
-    borderBlockEnd: "1px solid ".concat((_token$layout6 = token.layout) === null || _token$layout6 === void 0 || (_token$layout6 = _token$layout6.sider) === null || _token$layout6 === void 0 ? void 0 : _token$layout6.colorMenuItemDivider),
-    '> a': {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      minHeight: 22,
-      fontSize: 22,
-      '> img': {
-        display: 'inline-block',
-        height: 22,
-        verticalAlign: 'middle'
-      },
-      '> h1': {
-        display: 'inline-block',
-        height: 22,
-        marginBlock: 0,
-        marginInlineEnd: 0,
-        marginInlineStart: 6,
-        color: (_token$layout7 = token.layout) === null || _token$layout7 === void 0 || (_token$layout7 = _token$layout7.sider) === null || _token$layout7 === void 0 ? void 0 : _token$layout7.colorTextMenuTitle,
-        animationName: proLayoutTitleHide,
-        animationDuration: '.4s',
-        animationTimingFunction: 'ease',
-        fontWeight: 600,
-        fontSize: 16,
-        lineHeight: '22px',
-        verticalAlign: 'middle'
-      }
-    },
-    '&-collapsed': _defineProperty({
-      flexDirection: 'column-reverse',
-      margin: 0,
-      padding: 12
-    }, "".concat(token.proComponentsCls, "-layout-apps-icon"), {
-      marginBlockEnd: 8,
-      fontSize: 16,
-      transition: 'font-size 0.2s ease-in-out,color 0.2s ease-in-out'
-    })
-  }), '&-actions', {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    marginBlock: 4,
-    marginInline: 0,
-    color: (_token$layout8 = token.layout) === null || _token$layout8 === void 0 || (_token$layout8 = _token$layout8.sider) === null || _token$layout8 === void 0 ? void 0 : _token$layout8.colorTextMenu,
-    '&-collapsed': {
-      flexDirection: 'column-reverse',
-      paddingBlock: 0,
-      paddingInline: 8,
-      fontSize: 16,
-      transition: 'font-size 0.3s ease-in-out'
-    },
-    '&-list': {
-      color: (_token$layout9 = token.layout) === null || _token$layout9 === void 0 || (_token$layout9 = _token$layout9.sider) === null || _token$layout9 === void 0 ? void 0 : _token$layout9.colorTextMenuSecondary,
-      '&-collapsed': {
-        marginBlockEnd: 8,
-        animationName: 'none'
+const genSiderMenuStyle = token => {
+  return {
+    [`${token.proComponentsCls}-layout`]: {
+      [`${token.antCls}-layout-sider${token.componentCls}`]: {
+        background: token.layout?.sider?.colorMenuBackground || 'transparent'
       },
-      '&-item': {
-        paddingInline: 6,
-        paddingBlock: 6,
-        lineHeight: '16px',
-        fontSize: 16,
-        cursor: 'pointer',
-        borderRadius: token.borderRadius,
-        '&:hover': {
-          background: token.colorBgTextHover
+      [token.componentCls]: {
+        position: 'relative',
+        boxSizing: 'border-box',
+        '&-menu': {
+          position: 'relative',
+          zIndex: 10,
+          minHeight: '100%'
+        },
+        [`& ${token.antCls}-layout-sider-children`]: {
+          position: 'relative',
+          display: 'flex',
+          flexDirection: 'column',
+          height: '100%',
+          paddingInline: token.layout?.sider?.paddingInlineLayoutMenu,
+          paddingBlock: token.layout?.sider?.paddingBlockLayoutMenu,
+          borderInlineEnd: `1px solid ${token.colorSplit}`,
+          marginInlineEnd: -1
+        },
+        [`${token.antCls}-menu`]: {
+          [`${token.antCls}-menu-item-group-title`]: {
+            fontSize: token.fontSizeSM,
+            paddingBottom: 4
+          },
+          [`${token.antCls}-menu-item:not(${token.antCls}-menu-item-selected):hover`]: {
+            color: token.layout?.sider?.colorTextMenuItemHover
+          }
+        },
+        '&-logo': {
+          position: 'relative',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          paddingInline: 12,
+          paddingBlock: 16,
+          color: token.layout?.sider?.colorTextMenu,
+          cursor: 'pointer',
+          borderBlockEnd: `1px solid ${token.layout?.sider?.colorMenuItemDivider}`,
+          '> a': {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            minHeight: 22,
+            fontSize: 22,
+            '> img': {
+              display: 'inline-block',
+              height: 22,
+              verticalAlign: 'middle'
+            },
+            '> h1': {
+              display: 'inline-block',
+              height: 22,
+              marginBlock: 0,
+              marginInlineEnd: 0,
+              marginInlineStart: 6,
+              color: token.layout?.sider?.colorTextMenuTitle,
+              animationName: proLayoutTitleHide,
+              animationDuration: '.4s',
+              animationTimingFunction: 'ease',
+              fontWeight: 600,
+              fontSize: 16,
+              lineHeight: '22px',
+              verticalAlign: 'middle'
+            }
+          },
+          '&-collapsed': {
+            flexDirection: 'column-reverse',
+            margin: 0,
+            padding: 12,
+            [`${token.proComponentsCls}-layout-apps-icon`]: {
+              marginBlockEnd: 8,
+              fontSize: 16,
+              transition: 'font-size 0.2s ease-in-out,color 0.2s ease-in-out'
+            }
+          }
+        },
+        '&-actions': {
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          marginBlock: 4,
+          marginInline: 0,
+          color: token.layout?.sider?.colorTextMenu,
+          '&-collapsed': {
+            flexDirection: 'column-reverse',
+            paddingBlock: 0,
+            paddingInline: 8,
+            fontSize: 16,
+            transition: 'font-size 0.3s ease-in-out'
+          },
+          '&-list': {
+            color: token.layout?.sider?.colorTextMenuSecondary,
+            '&-collapsed': {
+              marginBlockEnd: 8,
+              animationName: 'none'
+            },
+            '&-item': {
+              paddingInline: 6,
+              paddingBlock: 6,
+              lineHeight: '16px',
+              fontSize: 16,
+              cursor: 'pointer',
+              borderRadius: token.borderRadius,
+              '&:hover': {
+                background: token.colorBgTextHover
+              }
+            }
+          },
+          '&-avatar': {
+            fontSize: 14,
+            paddingInline: 8,
+            paddingBlock: 8,
+            display: 'flex',
+            alignItems: 'center',
+            gap: token.marginXS,
+            borderRadius: token.borderRadius,
+            '& *': {
+              cursor: 'pointer'
+            },
+            '&:hover': {
+              background: token.colorBgTextHover
+            }
+          }
+        },
+        '&-hide-menu-collapsed': {
+          insetInlineStart: `-${token.proLayoutCollapsedWidth - 12}px`,
+          position: 'absolute'
+        },
+        '&-extra': {
+          marginBlockEnd: 16,
+          marginBlock: 0,
+          marginInline: 16,
+          '&-no-logo': {
+            marginBlockStart: 16
+          }
+        },
+        '&-links': {
+          width: '100%',
+          ul: {
+            height: 'auto'
+          }
+        },
+        '&-link-menu': {
+          border: 'none',
+          boxShadow: 'none',
+          background: 'transparent'
+        },
+        '&-footer': {
+          color: token.layout?.sider?.colorTextMenuSecondary,
+          paddingBlockEnd: 16,
+          fontSize: token.fontSize,
+          animationName: proLayoutTitleHide,
+          animationDuration: '.4s',
+          animationTimingFunction: 'ease'
         }
-      }
-    },
-    '&-avatar': {
-      fontSize: 14,
-      paddingInline: 8,
-      paddingBlock: 8,
-      display: 'flex',
-      alignItems: 'center',
-      gap: token.marginXS,
-      borderRadius: token.borderRadius,
-      '& *': {
-        cursor: 'pointer'
       },
-      '&:hover': {
-        background: token.colorBgTextHover
+      [`${token.componentCls}${token.componentCls}-fixed`]: {
+        position: 'fixed',
+        insetBlockStart: 0,
+        insetInlineStart: 0,
+        zIndex: '100',
+        height: '100%',
+        '&-mix': {
+          height: `calc(100% - ${token.layout?.header?.heightLayoutHeader || 56}px)`,
+          insetBlockStart: `${token.layout?.header?.heightLayoutHeader || 56}px`
+        }
       }
     }
-  }), '&-hide-menu-collapsed', {
-    insetInlineStart: "-".concat(token.proLayoutCollapsedWidth - 12, "px"),
-    position: 'absolute'
-  }), '&-extra', {
-    marginBlockEnd: 16,
-    marginBlock: 0,
-    marginInline: 16,
-    '&-no-logo': {
-      marginBlockStart: 16
-    }
-  }), '&-links', {
-    width: '100%',
-    ul: {
-      height: 'auto'
-    }
-  }), '&-link-menu', {
-    border: 'none',
-    boxShadow: 'none',
-    background: 'transparent'
-  }), '&-footer', {
-    color: (_token$layout10 = token.layout) === null || _token$layout10 === void 0 || (_token$layout10 = _token$layout10.sider) === null || _token$layout10 === void 0 ? void 0 : _token$layout10.colorTextMenuSecondary,
-    paddingBlockEnd: 16,
-    fontSize: token.fontSize,
-    animationName: proLayoutTitleHide,
-    animationDuration: '.4s',
-    animationTimingFunction: 'ease'
-  })), "".concat(token.componentCls).concat(token.componentCls, "-fixed"), {
-    position: 'fixed',
-    insetBlockStart: 0,
-    insetInlineStart: 0,
-    zIndex: '100',
-    height: '100%',
-    '&-mix': {
-      height: "calc(100% - ".concat(((_token$layout11 = token.layout) === null || _token$layout11 === void 0 || (_token$layout11 = _token$layout11.header) === null || _token$layout11 === void 0 ? void 0 : _token$layout11.heightLayoutHeader) || 56, "px)"),
-      insetBlockStart: "".concat(((_token$layout12 = token.layout) === null || _token$layout12 === void 0 || (_token$layout12 = _token$layout12.header) === null || _token$layout12 === void 0 ? void 0 : _token$layout12.heightLayoutHeader) || 56, "px")
-    }
-  }));
+  };
 };
-export function useStyle(prefixCls, _ref2) {
-  var proLayoutCollapsedWidth = _ref2.proLayoutCollapsedWidth;
-  return useAntdStyle('ProLayoutSiderMenu', function (token) {
-    var siderMenuToken = _objectSpread(_objectSpread({}, token), {}, {
-      componentCls: ".".concat(prefixCls),
-      proLayoutCollapsedWidth: proLayoutCollapsedWidth
-    });
+export function useStyle(prefixCls, {
+  proLayoutCollapsedWidth
+}) {
+  return useAntdStyle('ProLayoutSiderMenu', token => {
+    const siderMenuToken = {
+      ...token,
+      componentCls: `.${prefixCls}`,
+      proLayoutCollapsedWidth
+    };
     return [genSiderMenuStyle(siderMenuToken)];
   });
 }

package/es/layout/components/SiderMenu/style/menu.d.ts

@@ -5,6 +5,6 @@ export interface ProLayoutBaseMenuToken extends ProAliasToken {
     componentCls: string;
 }
 export declare function useStyle(prefixCls: string, mode: MenuMode | undefined): {
-    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     hashId: string;
 };

package/es/layout/components/SiderMenu/style/menu.js

@@ -1,117 +1,155 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { useStyle as useAntdStyle } from "../../../../provider";
-var genProLayoutBaseMenuStyle = function genProLayoutBaseMenuStyle(token, mode) {
-  var _token$layout, _token$layout2;
-  var menuToken = mode.includes('horizontal') ? (_token$layout = token.layout) === null || _token$layout === void 0 ? void 0 : _token$layout.header : (_token$layout2 = token.layout) === null || _token$layout2 === void 0 ? void 0 : _token$layout2.sider;
-  return _objectSpread(_objectSpread(_defineProperty({}, "".concat(token.componentCls), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
-    background: 'transparent',
-    color: menuToken === null || menuToken === void 0 ? void 0 : menuToken.colorTextMenu,
-    border: 'none'
-  }, "".concat(token.componentCls, "-menu-item"), {
-    transition: 'none !important'
-  }), "".concat(token.componentCls, "-submenu-has-icon"), _defineProperty({}, "> ".concat(token.antCls, "-menu-sub"), {
-    paddingInlineStart: 10
-  })), "".concat(token.antCls, "-menu-title-content"), {
-    width: '100%',
-    height: '100%',
-    display: 'inline-flex'
-  }), "".concat(token.antCls, "-menu-title-content"), {
-    '&:first-child': {
-      width: '100%'
+const genProLayoutBaseMenuStyle = (token, mode) => {
+  const menuToken = mode.includes('horizontal') ? token.layout?.header : token.layout?.sider;
+  return {
+    [`${token.componentCls}`]: {
+      background: 'transparent',
+      color: menuToken?.colorTextMenu,
+      border: 'none',
+      [`${token.componentCls}-menu-item`]: {
+        transition: 'none !important'
+      },
+      [`${token.componentCls}-submenu-has-icon`]: {
+        [`> ${token.antCls}-menu-sub`]: {
+          paddingInlineStart: 10
+        }
+      },
+      [`${token.antCls}-menu-title-content`]: {
+        width: '100%',
+        height: '100%',
+        display: 'inline-flex',
+        '&:first-child': {
+          width: '100%'
+        }
+      },
+      [`${token.componentCls}-item-icon`]: {
+        display: 'flex',
+        alignItems: 'center'
+      },
+      [`&&-collapsed`]: {
+        [`${token.antCls}-menu-item, 
+        ${token.antCls}-menu-item-group > ${token.antCls}-menu-item-group-list > ${token.antCls}-menu-item, 
+        ${token.antCls}-menu-item-group > ${token.antCls}-menu-item-group-list > ${token.antCls}-menu-submenu > ${token.antCls}-menu-submenu-title, 
+        ${token.antCls}-menu-submenu > ${token.antCls}-menu-submenu-title`]: {
+          paddingInline: '0 !important',
+          marginBlock: '4px !important'
+        },
+        [`${token.antCls}-menu-item-group > ${token.antCls}-menu-item-group-list > ${token.antCls}-menu-submenu-selected > ${token.antCls}-menu-submenu-title, 
+        ${token.antCls}-menu-submenu-selected > ${token.antCls}-menu-submenu-title`]: {
+          backgroundColor: menuToken?.colorBgMenuItemSelected,
+          borderRadius: token.borderRadiusLG
+        },
+        [`${token.componentCls}-group`]: {
+          [`${token.antCls}-menu-item-group-title`]: {
+            paddingInline: 0
+          }
+        }
+      },
+      '&-item-title': {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: token.marginXS,
+        width: '100%',
+        [`${token.componentCls}-item-text`]: {
+          maxWidth: '100%',
+          textOverflow: 'ellipsis',
+          overflow: 'hidden',
+          wordBreak: 'break-all',
+          whiteSpace: 'nowrap'
+        },
+        '&-collapsed': {
+          minWidth: 40,
+          height: 40,
+          [`${token.componentCls}-item-icon`]: {
+            height: '16px',
+            width: '16px',
+            lineHeight: '16px !important',
+            '.anticon': {
+              lineHeight: '16px !important',
+              height: '16px'
+            }
+          },
+          [`${token.componentCls}-item-text-has-icon`]: {
+            display: 'none !important'
+          }
+        },
+        '&-collapsed-level-0': {
+          flexDirection: 'column',
+          justifyContent: 'center'
+        },
+        [`&${token.componentCls}-group-item-title`]: {
+          gap: token.marginXS,
+          height: 18,
+          overflow: 'hidden'
+        },
+        [`&${token.componentCls}-item-collapsed-show-title`]: {
+          lineHeight: '16px',
+          gap: 0,
+          [`&${token.componentCls}-item-title-collapsed`]: {
+            display: 'flex',
+            [`${token.componentCls}-item-icon`]: {
+              height: '16px',
+              width: '16px',
+              lineHeight: '16px !important',
+              '.anticon': {
+                lineHeight: '16px!important',
+                height: '16px'
+              }
+            },
+            [`${token.componentCls}-item-text`]: {
+              opacity: '1 !important',
+              display: 'inline !important',
+              textAlign: 'center',
+              fontSize: 12,
+              height: 12,
+              lineHeight: '12px',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+              width: '100%',
+              margin: 0,
+              padding: 0,
+              marginBlockStart: 4
+            }
+          }
+        }
+      },
+      '&-group': {
+        [`${token.antCls}-menu-item-group-title`]: {
+          fontSize: 12,
+          color: token.colorTextLabel,
+          '.anticon': {
+            marginInlineEnd: 8
+          }
+        }
+      },
+      '&-group-divider': {
+        color: token.colorTextSecondary,
+        fontSize: 12,
+        lineHeight: 20
+      }
+    },
+    ...(mode.includes('horizontal') ? {} : {
+      [`${token.antCls}-menu-submenu${token.antCls}-menu-submenu-popup`]: {
+        [`${token.componentCls}-item-title`]: {
+          alignItems: 'flex-start'
+        }
+      }
+    }),
+    [`${token.antCls}-menu-submenu-popup`]: {
+      backgroundColor: 'rgba(255, 255, 255, 0.42)',
+      '-webkit-backdrop-filter': 'blur(8px)',
+      backdropFilter: 'blur(8px)'
     }
-  }), "".concat(token.componentCls, "-item-icon"), {
-    display: 'flex',
-    alignItems: 'center'
-  }), "&&-collapsed", _defineProperty(_defineProperty(_defineProperty({}, "".concat(token.antCls, "-menu-item, \n        ").concat(token.antCls, "-menu-item-group > ").concat(token.antCls, "-menu-item-group-list > ").concat(token.antCls, "-menu-item, \n        ").concat(token.antCls, "-menu-item-group > ").concat(token.antCls, "-menu-item-group-list > ").concat(token.antCls, "-menu-submenu > ").concat(token.antCls, "-menu-submenu-title, \n        ").concat(token.antCls, "-menu-submenu > ").concat(token.antCls, "-menu-submenu-title"), {
-    paddingInline: '0 !important',
-    marginBlock: '4px !important'
-  }), "".concat(token.antCls, "-menu-item-group > ").concat(token.antCls, "-menu-item-group-list > ").concat(token.antCls, "-menu-submenu-selected > ").concat(token.antCls, "-menu-submenu-title, \n        ").concat(token.antCls, "-menu-submenu-selected > ").concat(token.antCls, "-menu-submenu-title"), {
-    backgroundColor: menuToken === null || menuToken === void 0 ? void 0 : menuToken.colorBgMenuItemSelected,
-    borderRadius: token.borderRadiusLG
-  }), "".concat(token.componentCls, "-group"), _defineProperty({}, "".concat(token.antCls, "-menu-item-group-title"), {
-    paddingInline: 0
-  }))), '&-item-title', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: token.marginXS
-  }, "".concat(token.componentCls, "-item-text"), {
-    maxWidth: '100%',
-    textOverflow: 'ellipsis',
-    overflow: 'hidden',
-    wordBreak: 'break-all',
-    whiteSpace: 'nowrap'
-  }), '&-collapsed', _defineProperty(_defineProperty({
-    minWidth: 40,
-    height: 40
-  }, "".concat(token.componentCls, "-item-icon"), {
-    height: '16px',
-    width: '16px',
-    lineHeight: '16px !important',
-    '.anticon': {
-      lineHeight: '16px !important',
-      height: '16px'
-    }
-  }), "".concat(token.componentCls, "-item-text-has-icon"), {
-    display: 'none !important'
-  })), '&-collapsed-level-0', {
-    flexDirection: 'column',
-    justifyContent: 'center'
-  }), "&".concat(token.componentCls, "-group-item-title"), {
-    gap: token.marginXS,
-    height: 18,
-    overflow: 'hidden'
-  }), "&".concat(token.componentCls, "-item-collapsed-show-title"), _defineProperty({
-    lineHeight: '16px',
-    gap: 0
-  }, "&".concat(token.componentCls, "-item-title-collapsed"), _defineProperty(_defineProperty({
-    display: 'flex'
-  }, "".concat(token.componentCls, "-item-icon"), {
-    height: '16px',
-    width: '16px',
-    lineHeight: '16px !important',
-    '.anticon': {
-      lineHeight: '16px!important',
-      height: '16px'
-    }
-  }), "".concat(token.componentCls, "-item-text"), {
-    opacity: '1 !important',
-    display: 'inline !important',
-    textAlign: 'center',
-    fontSize: 12,
-    height: 12,
-    lineHeight: '12px',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-    width: '100%',
-    margin: 0,
-    padding: 0,
-    marginBlockStart: 4
-  })))), '&-group', _defineProperty({}, "".concat(token.antCls, "-menu-item-group-title"), {
-    fontSize: 12,
-    color: token.colorTextLabel,
-    '.anticon': {
-      marginInlineEnd: 8
-    }
-  })), '&-group-divider', {
-    color: token.colorTextSecondary,
-    fontSize: 12,
-    lineHeight: 20
-  })), mode.includes('horizontal') ? {} : _defineProperty({}, "".concat(token.antCls, "-menu-submenu").concat(token.antCls, "-menu-submenu-popup"), _defineProperty({}, "".concat(token.componentCls, "-item-title"), {
-    alignItems: 'flex-start'
-  }))), {}, _defineProperty({}, "".concat(token.antCls, "-menu-submenu-popup"), {
-    backgroundColor: 'rgba(255, 255, 255, 0.42)',
-    '-webkit-backdrop-filter': 'blur(8px)',
-    backdropFilter: 'blur(8px)'
-  }));
+  };
 };
 export function useStyle(prefixCls, mode) {
-  return useAntdStyle('ProLayoutBaseMenu' + mode, function (token) {
-    var proLayoutMenuToken = _objectSpread(_objectSpread({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return useAntdStyle('ProLayoutBaseMenu' + mode, token => {
+    const proLayoutMenuToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genProLayoutBaseMenuStyle(proLayoutMenuToken, mode || 'inline')];
   });
 }

package/es/layout/components/SiderMenu/style/stylish.d.ts

@@ -8,6 +8,6 @@ export declare function useStylish(prefixCls: string, { stylish, proLayoutCollap
     stylish?: GenerateStyle<SiderMenuToken>;
     proLayoutCollapsedWidth: number;
 }): {
-    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     hashId: string;
 };

package/es/layout/components/SiderMenu/style/stylish.js

@@ -1,15 +1,19 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { useStyle as useAntdStyle } from "../../../../provider";
-export function useStylish(prefixCls, _ref) {
-  var stylish = _ref.stylish,
-    proLayoutCollapsedWidth = _ref.proLayoutCollapsedWidth;
-  return useAntdStyle('ProLayoutSiderMenuStylish', function (token) {
-    var siderMenuToken = _objectSpread(_objectSpread({}, token), {}, {
-      componentCls: ".".concat(prefixCls),
-      proLayoutCollapsedWidth: proLayoutCollapsedWidth
-    });
+export function useStylish(prefixCls, {
+  stylish,
+  proLayoutCollapsedWidth
+}) {
+  return useAntdStyle('ProLayoutSiderMenuStylish', token => {
+    const siderMenuToken = {
+      ...token,
+      componentCls: `.${prefixCls}`,
+      proLayoutCollapsedWidth
+    };
     if (!stylish) return [];
-    return [_defineProperty({}, "div".concat(token.proComponentsCls, "-layout"), _defineProperty({}, "".concat(siderMenuToken.componentCls), stylish === null || stylish === void 0 ? void 0 : stylish(siderMenuToken)))];
+    return [{
+      [`div${token.proComponentsCls}-layout`]: {
+        [`${siderMenuToken.componentCls}`]: stylish?.(siderMenuToken)
+      }
+    }];
   });
 }