fix(layout): support pageContainer.token

ant-design · Oct 10, 2022 · bd6e110 · bd6e110
1 parent 5b1a774
commit bd6e110
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/packages/layout/src/components/PageContainer/index.tsx b/packages/layout/src/components/PageContainer/index.tsx
@@ -14,6 +14,7 @@ import { PageHeader } from '../PageHeader';
 import { PageLoading } from '../PageLoading';
 import type { WaterMarkProps } from '../WaterMark';
 import { WaterMark } from '../WaterMark';
+import type { pageContainerToken } from './style/index';
 import { useStyle } from './style/index';
 
 export type PageHeaderTabConfig = {
@@ -49,6 +50,11 @@ export type PageContainerProps = {
   prefixCls?: string;
   footer?: ReactNode[];
 
+  /**
+   * 自定义的 token
+   */
+  token?: pageContainerToken;
+
   /**
    * 与 antd 完全相同
    *
@@ -278,6 +284,7 @@ const PageContainer: React.FC<PageContainerProps> = (props) => {
     style,
     footer,
     affixProps,
+    token: propsToken,
     fixedHeader,
     breadcrumbRender,
     ...restProps
@@ -300,7 +307,7 @@ const PageContainer: React.FC<PageContainerProps> = (props) => {
 
   const basePageContainer = `${prefixCls}-page-container`;
 
-  const { wrapSSR, hashId } = useStyle(basePageContainer);
+  const { wrapSSR, hashId } = useStyle(basePageContainer, propsToken);
 
   const memoBreadcrumbRender = useMemo(() => {
     if (breadcrumbRender == false) return false;
@@ -370,7 +377,6 @@ const PageContainer: React.FC<PageContainerProps> = (props) => {
   }, [props.waterMarkProps, value.waterMarkProps, loadingDom, content]);
 
   const containerClassName = classNames(basePageContainer, hashId, className, {
-    [`${basePageContainer}-ghost`]: true,
     [`${basePageContainer}-with-footer`]: footer,
     [`${basePageContainer}-with-affix`]: fixedHeader && pageHeaderDom,
   });

diff --git a/packages/layout/src/components/PageContainer/style/index.ts b/packages/layout/src/components/PageContainer/style/index.ts
@@ -80,13 +80,19 @@ const genPageContainerStyle: GenerateStyle<
   };
 };
 
-export function useStyle(prefixCls: string) {
+export type pageContainerToken = {
+  paddingInlinePageContainerContent?: number;
+  paddingBlockPageContainerContent?: number;
+};
+
+export function useStyle(prefixCls: string, componentsToken: pageContainerToken | undefined) {
   const { pageContainer } = useContext(ProLayoutContext);
   return useAntdStyle('page-container', (token) => {
     const proCardToken: PageContainerToken & BaseLayoutDesignToken['pageContainer'] = {
       ...token,
       componentCls: `.${prefixCls}`,
       ...pageContainer,
+      ...componentsToken,
     };
 
     return [genPageContainerStyle(proCardToken)];