fix(layout): PageContainer support childrenContentStyle

ant-design · Nov 1, 2022 · 2a487cf · 2a487cf
1 parent bb0e5da
commit 2a487cf
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 2 deletions.
diff --git a/packages/card/package.json b/packages/card/package.json
@@ -30,6 +30,7 @@
   ],
   "dependencies": {
     "@ant-design/icons": "^4.2.1",
+    "@ant-design/pro-provider": "2.0.13",
     "@ant-design/pro-utils": "2.2.13",
     "@babel/runtime": "^7.18.0",
     "classnames": "^2.2.6",

diff --git a/packages/layout/src/components/PageContainer/index.tsx b/packages/layout/src/components/PageContainer/index.tsx
@@ -206,6 +206,7 @@ const memoRenderPageHeader = (
     header,
     prefixedClassName,
     extraContent,
+    childrenContentStyle,
     style,
     prefixCls,
     hashId,
@@ -289,6 +290,7 @@ const PageContainerBase: React.FC<PageContainerProps> = (props) => {
     token: propsToken,
     fixedHeader,
     breadcrumbRender,
+    childrenContentStyle,
     ...restProps
   } = props;
   const value = useContext(RouteContext);
@@ -344,12 +346,15 @@ const PageContainerBase: React.FC<PageContainerProps> = (props) => {
   const content = useMemo(() => {
     return children ? (
       <>
-        <div className={classNames(`${basePageContainer}-children-content ${hashId}`)}>
+        <div
+          className={classNames(`${basePageContainer}-children-content ${hashId}`)}
+          style={childrenContentStyle}
+        >
           {children}
         </div>
       </>
     ) : null;
-  }, [children, basePageContainer, hashId]);
+  }, [children, basePageContainer, childrenContentStyle, hashId]);
 
   const renderContentDom = useMemo(() => {
     // 只要loadingDom非空我们就渲染loadingDom,否则渲染内容

diff --git a/packages/layout/src/components/PageHeader/index.tsx b/packages/layout/src/components/PageHeader/index.tsx
@@ -14,6 +14,7 @@ export interface PageHeaderProps {
   title?: React.ReactNode;
   subTitle?: React.ReactNode;
   style?: React.CSSProperties;
+  childrenContentStyle?: React.CSSProperties;
   breadcrumb?: BreadcrumbProps | React.ReactElement<typeof Breadcrumb>;
   breadcrumbRender?: (props: PageHeaderProps, defaultDom: React.ReactNode) => React.ReactNode;
   tags?: React.ReactElement<TagType> | React.ReactElement<TagType>[];