🐛[BUG] StyleProvider 的 prefix 和 speedy 属性存在问题

[pokerboard]

💻 复现代码

1、StyleProvider 设置 speedy 为 true 时，不符合预期

import { StyleProvider, createGlobalStyle, createStyles } from 'antd-style';

const useStyles = createStyles({
  content: {
    color: 'red',
  },
});

const GlobalStyles = createGlobalStyle({
  '*': {
    fontSize: 40,
  },
});

const Demo: React.FC = () => {
  const { styles } = useStyles();

  return (
    <>
      <GlobalStyles />
      <div className={styles.content}>content</div>
    </>
  );
};

const Wrapper: React.FC = () => (
  <StyleProvider speedy>
    <Demo />
  </StyleProvider>
);

export default Wrapper;

2、StyleProvider 设置 prefix 为 demo，speedy 为 true 时，局部样式符合预期，全局样式前缀错误且不符合预期

import { StyleProvider, createGlobalStyle, createStyles } from 'antd-style';

const useStyles = createStyles({
  content: {
    color: 'red',
  },
});

const GlobalStyles = createGlobalStyle({
  '*': {
    fontSize: 40,
  },
});

const Demo: React.FC = () => {
  const { styles } = useStyles();

  return (
    <>
      <GlobalStyles />
      <div className={styles.content}>content</div>
    </>
  );
};

const Wrapper: React.FC = () => (
  <StyleProvider prefix="demo" speedy>
    <Demo />
  </StyleProvider>
);

export default Wrapper;

🏞 期望结果

临时解决方案

// @/utils/styles.tsx

import { CacheProvider, Global } from '@emotion/react';
import { serializeStyles } from '@emotion/serialize';
import type { CSSStyle } from 'antd-style';
import { createInstance } from 'antd-style';
import type { GlobalTheme } from 'antd-style/es/factories/createGlobalStyle';
import { memo } from 'react';

const instance = createInstance({
  key: 'demo',
  speedy: true,
});

export const { createStyles, useTheme, ThemeProvider } = instance;

export const createGlobalStyle = (
  ...styles: CSSStyle<GlobalTheme>
): React.FC<any> =>
  memo((props) => {
    const theme = useTheme();

    return (
      <Global
        styles={serializeStyles(styles, undefined, { ...props, theme })}
      />
    );
  });

export const StyleProvider: React.FC<React.PropsWithChildren> = ({
  children,
}) => (
  <CacheProvider value={instance.styleManager.cache}>{children}</CacheProvider>
);

import { StyleProvider, createGlobalStyle, createStyles } from '@/utils/styles';

const useStyles = createStyles({
  content: {
    color: 'red',
  },
});

const GlobalStyles = createGlobalStyle({
  '*': {
    fontSize: 40,
  },
});

const Demo: React.FC = () => {
  const { styles } = useStyles();

  return (
    <>
      <GlobalStyles />
      <div className={styles.content}>content</div>
    </>
  );
};

const Wrapper: React.FC = () => (
  <StyleProvider>
    <Demo />
  </StyleProvider>
);

export default Wrapper;