✨ feat: 支持使用 antd-style 的 StyleProvider 做 SSR

ant-design · Mar 15, 2023 · 6c0b017 · 6c0b017
1 parent 1a2a9fd
commit 6c0b017
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 8 deletions.
diff --git a/src/factories/createStyleProvider/index.tsx b/src/factories/createStyleProvider/index.tsx
@@ -1,10 +1,16 @@
 import { DEFAULT_CSS_PREFIX_KEY } from '@/core';
 import { createEmotion, Emotion } from '@/core/createEmotion';
 import { StyleManager } from '@/types';
+import { StyleProvider as AntdStyleProvider } from '@ant-design/cssinjs';
+import type { StyleContextProps } from '@ant-design/cssinjs/es/StyleContext';
 import { StylisPlugin } from '@emotion/cache';
 import { Context, FC, memo, ReactNode, useEffect, useMemo } from 'react';
 
-export interface StyleProviderProps {
+export interface StyleProviderProps
+  extends Pick<
+    StyleContextProps,
+    'container' | 'autoClear' | 'cache' | 'hashPriority' | 'ssrInline' | 'transformers'
+  > {
   prefix: string;
 
   nonce?: string;
@@ -40,23 +46,34 @@ export const createStyleProvider = (
       prefix = defaultProps?.prefix || DEFAULT_CSS_PREFIX_KEY,
       speedy = defaultProps?.speedy,
       getStyleManager,
-
-      ...emotionOptions
+      container,
+      nonce,
+      insertionPoint,
+      stylisPlugins,
+      ...antdStyleProviderProps
     }) => {
       const emotion = useMemo(() => {
         const defaultSpeedy = process.env.NODE_ENV === 'development';
 
         return createEmotion({
           speedy: speedy ?? defaultSpeedy,
           key: prefix,
-          ...emotionOptions,
+          container,
+          nonce,
+          insertionPoint,
+          stylisPlugins,
         });
-      }, [prefix, speedy, emotionOptions]);
+      }, [prefix, speedy, container, nonce, insertionPoint, stylisPlugins]);
 
       useEffect(() => {
         getStyleManager?.(emotion);
       }, [emotion]);
 
-      return <EmotionContext.Provider value={emotion}>{children}</EmotionContext.Provider>;
+      return (
+        // @ts-ignore
+        <AntdStyleProvider {...antdStyleProviderProps}>
+          <EmotionContext.Provider value={emotion}>{children}</EmotionContext.Provider>
+        </AntdStyleProvider>
+      );
     },
   );
diff --git a/tests/functions/extractStaticStyle.test.tsx b/tests/functions/extractStaticStyle.test.tsx
@@ -2,9 +2,8 @@
  * @jest-environment node
  */
 
-import { StyleProvider } from '@ant-design/cssinjs';
 import { Button } from 'antd';
-import { createStyles, extractStaticStyle } from 'antd-style';
+import { createStyles, extractStaticStyle, StyleProvider } from 'antd-style';
 import { renderToString } from 'react-dom/server';
 import { Flexbox } from 'react-layout-kit';