fix(layout): fix PageContainer token no rerender error

ant-design · Oct 11, 2022 · 5611a16 · 5611a16
1 parent 2ab107d
commit 5611a16
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 15 deletions.
diff --git a/packages/layout/src/components/PageContainer/style/index.ts b/packages/layout/src/components/PageContainer/style/index.ts
@@ -87,14 +87,19 @@ export type pageContainerToken = {
 
 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 useAntdStyle(
+    'page-container',
+    (token) => {
+      const proCardToken: PageContainerToken & BaseLayoutDesignToken['pageContainer'] = {
+        ...token,
+        componentCls: `.${prefixCls}`,
+        ...pageContainer,
+        ...componentsToken,
+      };
 
-    return [genPageContainerStyle(proCardToken)];
-  });
+      return [genPageContainerStyle(proCardToken)];
+    },
+    // 触发一下更新
+    componentsToken,
+  );
 }
diff --git a/packages/utils/src/useStyle/index.ts b/packages/utils/src/useStyle/index.ts
@@ -101,6 +101,7 @@ export const operationUnit = (token: ProAliasToken): CSSObject => ({
 export function useStyle(
   componentName: string,
   styleFn: (token: ProAliasToken) => CSSInterpolation,
+  deps?: Record<string, any>,
 ): UseStyleResult {
   const { token, hashId, theme } = useToken();
 
@@ -112,12 +113,22 @@ export function useStyle(
    */
   const proComponentsCls = `.${getPrefixCls()}-pro`;
   return {
-    wrapSSR: useStyleRegister({ theme, token, hashId, path: [componentName] }, () =>
-      styleFn({
-        ...token,
-        antCls: '.' + getPrefixCls(),
-        proComponentsCls,
-      }),
+    wrapSSR: useStyleRegister(
+      {
+        theme,
+        token: {
+          ...deps,
+          ...token,
+        },
+        hashId,
+        path: [componentName],
+      },
+      () =>
+        styleFn({
+          ...token,
+          antCls: '.' + getPrefixCls(),
+          proComponentsCls,
+        }),
     ),
     hashId,
   };