✨ feat: 支持 StyleProvider 上指定 container 进行样式点插入

docs/api/create-instance.md

@@ -77,7 +77,7 @@ const componentStyleIntanceWithSC = createInstance({
 
 ## 指定 container
 
-在创建时制定 container ，可以使得样式插入时都在该容器处插入，在 iframe 等场景比较有用。
+在创建时指定 container ，可以使得样式都在该容器处插入，在 iframe 等场景比较有用。
 
 ```ts
 const { css, StyleProvider, createStyles } = createInstance({
@@ -86,4 +86,8 @@ const { css, StyleProvider, createStyles } = createInstance({
 });
 ```
 
-<code src="../demos/api/createInstance/hasContainer.tsx"></code>
+<code src="../demos/api/createInstance/createInstanceWithContainer.tsx"></code>
+
+还有一个场景是，组件库里用 `createInstance` 暴露出的 `createStyles` 定义好了样式，想在不同的业务场景下指定不同的插入位置，业务上通过组件外部包一层 `StyleProvider` 并设置 `container` 来实现节点的自行插入。
+
+<code src="../demos/api/createInstance/createInstanceWithStyleProviderContainer.tsx"></code>

docs/demos/api/createInstance/createInstanceWithContainer.tsx

@@ -0,0 +1,30 @@
+/**
+ * iframe: true
+ */
+import { Button } from 'antd';
+import { createInstance } from 'antd-style';
+
+const { css, StyleProvider, createStyles } = createInstance({
+  key: 'test',
+  container: document.body,
+});
+
+const useStyles = createStyles({
+  text: css`
+    color: blue;
+  `,
+});
+
+const Text = () => {
+  const { styles } = useStyles();
+  return <div className={styles.text}>我是文本</div>;
+};
+
+export default () => {
+  return (
+    <StyleProvider>
+      <Text />
+      <Button>按钮</Button>
+    </StyleProvider>
+  );
+};

docs/demos/api/createInstance/createInstanceWithStyleProviderContainer.tsx

@@ -0,0 +1,29 @@
+/**
+ * iframe: true
+ */
+import { Button } from 'antd';
+import { createInstance } from 'antd-style';
+
+const { css, StyleProvider, createStyles } = createInstance({
+  key: 'test',
+});
+
+const useStyles = createStyles({
+  text: css`
+    color: red;
+  `,
+});
+
+const Text = () => {
+  const { styles } = useStyles();
+  return <div className={styles.text}>我是文本</div>;
+};
+
+export default () => {
+  return (
+    <StyleProvider container={document.body}>
+      <Text />
+      <Button>按钮</Button>
+    </StyleProvider>
+  );
+};

src/factories/createStyleProvider/index.tsx

@@ -8,16 +8,13 @@ import { Context, FC, memo, ReactNode, useEffect, useMemo } from 'react';
 
 export interface StyleProviderProps
   extends Partial<
-    Pick<
-      StyleContextProps,
-      'container' | 'autoClear' | 'cache' | 'hashPriority' | 'ssrInline' | 'transformers'
-    >
+    Pick<StyleContextProps, 'autoClear' | 'cache' | 'hashPriority' | 'ssrInline' | 'transformers'>
   > {
   prefix?: string;
 
   nonce?: string;
   stylisPlugins?: StylisPlugin[];
-  container?: HTMLElement;
+  container?: Element | ShadowRoot | null;
   /**
    * 开启极速模式，极速模式下不会插入真实的样式 style
    * @default false
@@ -37,6 +34,7 @@ interface DefaultProps {
   prefix: string;
   speedy?: boolean;
   container?: Node;
+  defaultEmotion: Emotion;
 }
 
 export const createStyleProvider = (
@@ -55,13 +53,21 @@ export const createStyleProvider = (
       stylisPlugins,
       ...antdStyleProviderProps
     }) => {
+      // FIXME: 现在的解决方案比较 hack，通过修改默认传入的 defaultEmotion 的方式来实现，后续新方案里要考虑通过 context 的方式来实现
+      if (container && defaultProps) {
+        defaultProps.defaultEmotion.sheet.container = container;
+      }
+
+      // useEffect(() => {
+      //   console.log(container);
+      // }, [container]);
       const emotion = useMemo(() => {
         const defaultSpeedy = process.env.NODE_ENV === 'development';
 
         return createEmotion({
           speedy: speedy ?? defaultSpeedy,
           key: prefix,
-          container,
+          container: container as Node,
           nonce,
           insertionPoint,
           stylisPlugins,

src/functions/createInstance.ts

@@ -65,7 +65,6 @@ export const createInstance = <T = any>(options: CreateOptions<T>) => {
     speedy: options.speedy,
     container: options.container,
   });
-
   // 将 cache 存到一个全局
   cacheManager.add(emotion.cache);
 
@@ -113,6 +112,7 @@ export const createInstance = <T = any>(options: CreateOptions<T>) => {
     speedy: options.speedy,
     prefix: defaultKey,
     container: options.container,
+    defaultEmotion: emotion,
   });
 
   return {