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

package/lib/layout/components/GlobalHeader/rightContentStyle.js

@@ -1,70 +1,69 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useStyle = useStyle;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _utils = require("../../../utils");
-var genTopNavHeaderStyle = function genTopNavHeaderStyle(token) {
-  var _token$layout, _token$layout2, _token$layout3, _token$layout4, _token$layout5;
-  return (0, _defineProperty2.default)({}, token.componentCls, {
-    '&-header-actions': {
-      display: 'flex',
-      height: '100%',
-      alignItems: 'center',
-      '&-item': {
-        display: 'inline-flex',
+const genTopNavHeaderStyle = token => {
+  return {
+    [token.componentCls]: {
+      '&-header-actions': {
+        display: 'flex',
+        height: '100%',
         alignItems: 'center',
-        justifyContent: 'center',
-        paddingBlock: 0,
-        paddingInline: 2,
-        color: (_token$layout = token.layout) === null || _token$layout === void 0 || (_token$layout = _token$layout.header) === null || _token$layout === void 0 ? void 0 : _token$layout.colorTextRightActionsItem,
-        fontSize: '16px',
-        cursor: 'pointer',
-        borderRadius: token.borderRadius,
-        '> *': {
-          paddingInline: 6,
-          paddingBlock: 6,
+        '&-item': {
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          paddingBlock: 0,
+          paddingInline: 2,
+          color: token.layout?.header?.colorTextRightActionsItem,
+          fontSize: '16px',
+          cursor: 'pointer',
           borderRadius: token.borderRadius,
-          '&:hover': {
-            backgroundColor: (_token$layout2 = token.layout) === null || _token$layout2 === void 0 || (_token$layout2 = _token$layout2.header) === null || _token$layout2 === void 0 ? void 0 : _token$layout2.colorBgRightActionsItemHover
+          '> *': {
+            paddingInline: 6,
+            paddingBlock: 6,
+            borderRadius: token.borderRadius,
+            '&:hover': {
+              backgroundColor: token.layout?.header?.colorBgRightActionsItemHover
+            }
           }
-        }
-      },
-      '&-avatar': {
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingInlineStart: token.padding,
-        paddingInlineEnd: token.padding,
-        cursor: 'pointer',
-        color: (_token$layout3 = token.layout) === null || _token$layout3 === void 0 || (_token$layout3 = _token$layout3.header) === null || _token$layout3 === void 0 ? void 0 : _token$layout3.colorTextRightActionsItem,
-        '> div': {
-          height: '44px',
-          color: (_token$layout4 = token.layout) === null || _token$layout4 === void 0 || (_token$layout4 = _token$layout4.header) === null || _token$layout4 === void 0 ? void 0 : _token$layout4.colorTextRightActionsItem,
-          paddingInline: 8,
-          paddingBlock: 8,
-          cursor: 'pointer',
-          display: 'flex',
+        },
+        '&-avatar': {
+          display: 'inline-flex',
           alignItems: 'center',
-          lineHeight: '44px',
-          borderRadius: token.borderRadius,
-          '&:hover': {
-            backgroundColor: (_token$layout5 = token.layout) === null || _token$layout5 === void 0 || (_token$layout5 = _token$layout5.header) === null || _token$layout5 === void 0 ? void 0 : _token$layout5.colorBgRightActionsItemHover
+          justifyContent: 'center',
+          paddingInlineStart: token.padding,
+          paddingInlineEnd: token.padding,
+          cursor: 'pointer',
+          color: token.layout?.header?.colorTextRightActionsItem,
+          '> div': {
+            height: '44px',
+            color: token.layout?.header?.colorTextRightActionsItem,
+            paddingInline: 8,
+            paddingBlock: 8,
+            cursor: 'pointer',
+            display: 'flex',
+            alignItems: 'center',
+            lineHeight: '44px',
+            borderRadius: token.borderRadius,
+            '&:hover': {
+              backgroundColor: token.layout?.header?.colorBgRightActionsItemHover
+            }
           }
         }
       }
     }
-  });
+  };
 };
 function useStyle(prefixCls) {
-  return (0, _utils.useStyle)('ProLayoutRightContent', function (token) {
-    var proToken = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return (0, _utils.useStyle)('ProLayoutRightContent', token => {
+    const proToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genTopNavHeaderStyle(proToken)];
   });
 }

package/lib/layout/components/GlobalHeader/style.d.ts

@@ -4,6 +4,6 @@ export interface GlobalHeaderToken extends ProAliasToken {
     componentCls: string;
 }
 export declare function useStyle(prefixCls: string): {
-    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/lib/layout/components/GlobalHeader/style.js

@@ -1,71 +1,74 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useStyle = useStyle;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _provider = require("../../../provider");
-var genGlobalHeaderStyle = function genGlobalHeaderStyle(token) {
-  var _token$layout, _token$layout2, _token$layout3;
-  return (0, _defineProperty2.default)({}, token.componentCls, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
-    position: 'relative',
-    background: 'transparent',
-    display: 'flex',
-    alignItems: 'center',
-    marginBlock: 0,
-    marginInline: 16,
-    height: ((_token$layout = token.layout) === null || _token$layout === void 0 || (_token$layout = _token$layout.header) === null || _token$layout === void 0 ? void 0 : _token$layout.heightLayoutHeader) || 56,
-    boxSizing: 'border-box',
-    '> a': {
-      height: '100%'
-    }
-  }, "".concat(token.proComponentsCls, "-layout-apps-icon"), {
-    marginInlineEnd: 16
-  }), '&-collapsed-button', {
-    minHeight: '22px',
-    color: (_token$layout2 = token.layout) === null || _token$layout2 === void 0 || (_token$layout2 = _token$layout2.header) === null || _token$layout2 === void 0 ? void 0 : _token$layout2.colorHeaderTitle,
-    fontSize: '18px',
-    marginInlineEnd: '16px'
-  }), '&-logo', {
-    position: 'relative',
-    marginInlineEnd: '16px',
-    a: {
+const genGlobalHeaderStyle = token => {
+  return {
+    [token.componentCls]: {
+      position: 'relative',
+      background: 'transparent',
       display: 'flex',
       alignItems: 'center',
-      height: '100%',
-      minHeight: '22px',
-      fontSize: '20px'
-    },
-    img: {
-      height: '28px'
-    },
-    h1: {
-      height: '32px',
       marginBlock: 0,
-      marginInline: 0,
-      marginInlineStart: 8,
-      fontWeight: '600',
-      color: ((_token$layout3 = token.layout) === null || _token$layout3 === void 0 || (_token$layout3 = _token$layout3.header) === null || _token$layout3 === void 0 ? void 0 : _token$layout3.colorHeaderTitle) || token.colorTextHeading,
-      fontSize: '18px',
-      lineHeight: '32px'
-    },
-    '&-mix': {
-      display: 'flex',
-      alignItems: 'center'
+      marginInline: 16,
+      height: token.layout?.header?.heightLayoutHeader || 56,
+      boxSizing: 'border-box',
+      '> a': {
+        height: '100%'
+      },
+      [`${token.proComponentsCls}-layout-apps-icon`]: {
+        marginInlineEnd: 16
+      },
+      '&-collapsed-button': {
+        minHeight: '22px',
+        color: token.layout?.header?.colorHeaderTitle,
+        fontSize: '18px',
+        marginInlineEnd: '16px'
+      },
+      '&-logo': {
+        position: 'relative',
+        marginInlineEnd: '16px',
+        a: {
+          display: 'flex',
+          alignItems: 'center',
+          height: '100%',
+          minHeight: '22px',
+          fontSize: '20px'
+        },
+        img: {
+          height: '28px'
+        },
+        h1: {
+          height: '32px',
+          marginBlock: 0,
+          marginInline: 0,
+          marginInlineStart: 8,
+          fontWeight: '600',
+          color: token.layout?.header?.colorHeaderTitle || token.colorTextHeading,
+          fontSize: '18px',
+          lineHeight: '32px'
+        },
+        '&-mix': {
+          display: 'flex',
+          alignItems: 'center'
+        }
+      },
+      '&-logo-mobile': {
+        minWidth: '24px',
+        marginInlineEnd: 0
+      }
     }
-  }), '&-logo-mobile', {
-    minWidth: '24px',
-    marginInlineEnd: 0
-  }));
+  };
 };
 function useStyle(prefixCls) {
-  return (0, _provider.useStyle)('ProLayoutGlobalHeader', function (token) {
-    var GlobalHeaderToken = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return (0, _provider.useStyle)('ProLayoutGlobalHeader', token => {
+    const GlobalHeaderToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genGlobalHeaderStyle(GlobalHeaderToken)];
   });
 }

package/lib/layout/components/GridContent/index.js

@@ -1,14 +1,12 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GridContent = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _antd = require("antd");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = require("clsx");
 var _react = _interopRequireWildcard(require("react"));
 var _RouteContext = require("../../context/RouteContext");
 var _style = require("./style");
@@ -19,27 +17,34 @@ var _jsxRuntime = require("react/jsx-runtime");
  *
  * @param props
  */
-var GridContent = exports.GridContent = function GridContent(props) {
-  var value = (0, _react.useContext)(_RouteContext.RouteContext);
-  var children = props.children,
-    propsContentWidth = props.contentWidth,
-    propsClassName = props.className,
-    style = props.style;
-  var _useContext = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext.getPrefixCls;
-  var prefixCls = props.prefixCls || getPrefixCls('pro');
-  var contentWidth = propsContentWidth || value.contentWidth;
-  var className = "".concat(prefixCls, "-grid-content");
-  var _useStyle = (0, _style.useStyle)(className),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
-  var isWide = contentWidth === 'Fixed' && value.layout === 'top';
+const GridContent = props => {
+  const value = (0, _react.useContext)(_RouteContext.RouteContext);
+  const {
+    children,
+    contentWidth: propsContentWidth,
+    className: propsClassName,
+    style
+  } = props;
+  const {
+    getPrefixCls
+  } = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
+  const prefixCls = props.prefixCls || getPrefixCls('pro');
+  const contentWidth = propsContentWidth || value.contentWidth;
+  const className = `${prefixCls}-grid-content`;
+  const {
+    wrapSSR,
+    hashId
+  } = (0, _style.useStyle)(className);
+  const isWide = contentWidth === 'Fixed' && value.layout === 'top';
   return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: (0, _classnames.default)(className, hashId, propsClassName, (0, _defineProperty2.default)({}, "".concat(className, "-wide"), isWide)),
+    className: (0, _clsx.clsx)(className, hashId, propsClassName, {
+      [`${className}-wide`]: isWide
+    }),
     style: style,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "".concat(prefixCls, "-grid-content-children ").concat(hashId).trim(),
+      className: `${prefixCls}-grid-content-children ${hashId}`.trim(),
       children: children
     })
   }));
-};
+};
+exports.GridContent = GridContent;

package/lib/layout/components/GridContent/style.d.ts

@@ -4,6 +4,6 @@ export interface GridContentToken extends ProAliasToken {
     componentCls: string;
 }
 export declare function useStyle(prefixCls: string): {
-    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/lib/layout/components/GridContent/style.js

@@ -1,27 +1,27 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useStyle = useStyle;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _provider = require("../../../provider");
-var genGridContentStyle = function genGridContentStyle(token) {
-  return (0, _defineProperty2.default)({}, token.componentCls, {
-    width: '100%',
-    '&-wide': {
-      maxWidth: 1152,
-      margin: '0 auto'
+const genGridContentStyle = token => {
+  return {
+    [token.componentCls]: {
+      width: '100%',
+      '&-wide': {
+        maxWidth: 1152,
+        margin: '0 auto'
+      }
     }
-  });
+  };
 };
 function useStyle(prefixCls) {
-  return (0, _provider.useStyle)('ProLayoutGridContent', function (token) {
-    var GridContentToken = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return (0, _provider.useStyle)('ProLayoutGridContent', token => {
+    const GridContentToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genGridContentStyle(GridContentToken)];
   });
 }

package/lib/layout/components/Header/index.js

@@ -1,16 +1,12 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DefaultHeader = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _antd = require("antd");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = require("clsx");
 var _react = _interopRequireWildcard(require("react"));
 var _provider = require("../../../provider");
 var _utils = require("../../utils/utils");
@@ -19,56 +15,55 @@ var _TopNavHeader = require("../TopNavHeader");
 var _header = require("./style/header");
 var _stylish = require("./style/stylish");
 var _jsxRuntime = require("react/jsx-runtime");
-var Header = _antd.Layout.Header;
-var DefaultHeader = exports.DefaultHeader = function DefaultHeader(props) {
-  var _token$layout2, _token$layout3, _token$layout4;
-  var isMobile = props.isMobile,
-    fixedHeader = props.fixedHeader,
-    propsClassName = props.className,
-    style = props.style,
-    collapsed = props.collapsed,
-    prefixCls = props.prefixCls,
-    onCollapse = props.onCollapse,
-    layout = props.layout,
-    headerRender = props.headerRender,
-    headerContentRender = props.headerContentRender;
-  var _useContext = (0, _react.useContext)(_provider.ProProvider),
-    token = _useContext.token;
-  var context = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    isFixedHeaderScroll = _useState2[0],
-    setIsFixedHeaderScroll = _useState2[1];
-  var needFixedHeader = fixedHeader || layout === 'mix';
-  var renderContent = (0, _react.useCallback)(function () {
-    var isTop = layout === 'top';
-    var clearMenuData = (0, _utils.clearMenuItem)(props.menuData || []);
-    var defaultDom = /*#__PURE__*/(0, _jsxRuntime.jsx)(_GlobalHeader.GlobalHeader, (0, _objectSpread2.default)((0, _objectSpread2.default)({
-      onCollapse: onCollapse
-    }, props), {}, {
+const {
+  Header
+} = _antd.Layout;
+const DefaultHeader = props => {
+  const {
+    isMobile,
+    fixedHeader,
+    className: propsClassName,
+    style,
+    collapsed,
+    prefixCls,
+    onCollapse,
+    layout,
+    headerRender,
+    headerContentRender
+  } = props;
+  const {
+    token
+  } = (0, _react.useContext)(_provider.ProProvider);
+  const context = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
+  const [isFixedHeaderScroll, setIsFixedHeaderScroll] = (0, _react.useState)(false);
+  const needFixedHeader = fixedHeader || layout === 'mix';
+  const renderContent = (0, _react.useCallback)(() => {
+    const isTop = layout === 'top';
+    const clearMenuData = (0, _utils.clearMenuItem)(props.menuData || []);
+    let defaultDom = /*#__PURE__*/(0, _jsxRuntime.jsx)(_GlobalHeader.GlobalHeader, {
+      onCollapse: onCollapse,
+      ...props,
       menuData: clearMenuData,
       children: headerContentRender && headerContentRender(props, null)
-    }));
+    });
     if (isTop && !isMobile) {
-      defaultDom = /*#__PURE__*/(0, _jsxRuntime.jsx)(_TopNavHeader.TopNavHeader, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+      defaultDom = /*#__PURE__*/(0, _jsxRuntime.jsx)(_TopNavHeader.TopNavHeader, {
         mode: "horizontal",
-        onCollapse: onCollapse
-      }, props), {}, {
+        onCollapse: onCollapse,
+        ...props,
         menuData: clearMenuData
-      }));
+      });
     }
     if (headerRender && typeof headerRender === 'function') {
       return headerRender(props, defaultDom);
     }
     return defaultDom;
   }, [headerContentRender, headerRender, isMobile, layout, onCollapse, props]);
-  (0, _react.useEffect)(function () {
-    var _context$getTargetCon;
-    var dom = (context === null || context === void 0 || (_context$getTargetCon = context.getTargetContainer) === null || _context$getTargetCon === void 0 ? void 0 : _context$getTargetCon.call(context)) || document.body;
-    var isFixedHeaderFn = function isFixedHeaderFn() {
-      var _token$layout;
-      var scrollTop = dom.scrollTop;
-      if (scrollTop > (((_token$layout = token.layout) === null || _token$layout === void 0 || (_token$layout = _token$layout.header) === null || _token$layout === void 0 ? void 0 : _token$layout.heightLayoutHeader) || 56) && !isFixedHeaderScroll) {
+  (0, _react.useEffect)(() => {
+    const dom = context?.getTargetContainer?.() || document.body;
+    const isFixedHeaderFn = () => {
+      const scrollTop = dom.scrollTop;
+      if (scrollTop > (token.layout?.header?.heightLayoutHeader || 56) && !isFixedHeaderScroll) {
         setIsFixedHeaderScroll(true);
         return true;
       }
@@ -82,20 +77,29 @@ var DefaultHeader = exports.DefaultHeader = function DefaultHeader(props) {
     dom.addEventListener('scroll', isFixedHeaderFn, {
       passive: true
     });
-    return function () {
+    return () => {
       dom.removeEventListener('scroll', isFixedHeaderFn);
     };
-  }, [(_token$layout2 = token.layout) === null || _token$layout2 === void 0 || (_token$layout2 = _token$layout2.header) === null || _token$layout2 === void 0 ? void 0 : _token$layout2.heightLayoutHeader, needFixedHeader, isFixedHeaderScroll]);
-  var isTop = layout === 'top';
-  var baseClassName = "".concat(prefixCls, "-layout-header");
-  var _useStyle = (0, _header.useStyle)(baseClassName),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
-  var stylish = (0, _stylish.useStylish)("".concat(baseClassName, ".").concat(baseClassName, "-stylish"), {
+  }, [token.layout?.header?.heightLayoutHeader, needFixedHeader, isFixedHeaderScroll]);
+  const isTop = layout === 'top';
+  const baseClassName = `${prefixCls}-layout-header`;
+  const {
+    wrapSSR,
+    hashId
+  } = (0, _header.useStyle)(baseClassName);
+  const stylish = (0, _stylish.useStylish)(`${baseClassName}.${baseClassName}-stylish`, {
     proLayoutCollapsedWidth: 64,
     stylish: props.stylish
   });
-  var className = (0, _classnames.default)(propsClassName, hashId, baseClassName, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(baseClassName, "-fixed-header"), needFixedHeader), "".concat(baseClassName, "-fixed-header-scroll"), isFixedHeaderScroll), "".concat(baseClassName, "-mix"), layout === 'mix'), "".concat(baseClassName, "-fixed-header-action"), !collapsed), "".concat(baseClassName, "-top-menu"), isTop), "".concat(baseClassName, "-header"), true), "".concat(baseClassName, "-stylish"), !!props.stylish));
+  const className = (0, _clsx.clsx)(propsClassName, hashId, baseClassName, {
+    [`${baseClassName}-fixed-header`]: needFixedHeader,
+    [`${baseClassName}-fixed-header-scroll`]: isFixedHeaderScroll,
+    [`${baseClassName}-mix`]: layout === 'mix',
+    [`${baseClassName}-fixed-header-action`]: !collapsed,
+    [`${baseClassName}-top-menu`]: isTop,
+    [`${baseClassName}-header`]: true,
+    [`${baseClassName}-stylish`]: !!props.stylish
+  });
   if (layout === 'side' && !isMobile) return null;
   return stylish.wrapSSR(wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.ConfigProvider
@@ -111,12 +115,13 @@ var DefaultHeader = exports.DefaultHeader = function DefaultHeader(props) {
         }
       },
       children: [needFixedHeader && /*#__PURE__*/(0, _jsxRuntime.jsx)(Header, {
-        style: (0, _objectSpread2.default)({
-          height: ((_token$layout3 = token.layout) === null || _token$layout3 === void 0 || (_token$layout3 = _token$layout3.header) === null || _token$layout3 === void 0 ? void 0 : _token$layout3.heightLayoutHeader) || 56,
-          lineHeight: "".concat(((_token$layout4 = token.layout) === null || _token$layout4 === void 0 || (_token$layout4 = _token$layout4.header) === null || _token$layout4 === void 0 ? void 0 : _token$layout4.heightLayoutHeader) || 56, "px"),
+        style: {
+          height: token.layout?.header?.heightLayoutHeader || 56,
+          lineHeight: `${token.layout?.header?.heightLayoutHeader || 56}px`,
           backgroundColor: 'transparent',
-          zIndex: 19
-        }, style)
+          zIndex: 19,
+          ...style
+        }
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Header, {
         className: className,
         style: style,
@@ -124,4 +129,5 @@ var DefaultHeader = exports.DefaultHeader = function DefaultHeader(props) {
       })]
     })
   })));
-};
+};
+exports.DefaultHeader = DefaultHeader;

package/lib/layout/components/Header/style/header.d.ts

@@ -4,6 +4,6 @@ export interface ProLayoutHeaderToken extends ProAliasToken {
     componentCls: string;
 }
 export declare function useStyle(prefixCls: string): {
-    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;
 };