fix: undefined error when consuming cssvar

docs/demos/ThemeProvider/_app.tsx

@@ -1,17 +1,28 @@
 import { Space } from 'antd';
-import { useTheme } from 'antd-style';
+import { createStyles, useTheme } from 'antd-style';
 import { FC } from 'react';
 
 interface AppProps {
   title: string;
   tokenName?: string;
 }
 
-const App: FC<AppProps> = ({ title, tokenName }) => {
+const useStyle = createStyles(({ cx, cssVar }, { tokenName }: AppProps) => ({
+  box: {
+    width: 32,
+    height: 32,
+    background: { ...(cssVar as any) }[tokenName!] || 'pink',
+    borderRadius: 16,
+  },
+}));
+
+const App: FC<AppProps> = (props) => {
+  const { title, tokenName } = props;
   const token = useTheme();
 
   // @ts-ignore
   const tokenColor = tokenName ? token[tokenName] : token.colorPrimary;
+  const { styles } = useStyle(props);
 
   return (
     <Space direction={'vertical'} size={8}>
@@ -32,6 +43,7 @@ const App: FC<AppProps> = ({ title, tokenName }) => {
             borderRadius: 16,
           }}
         />
+        <div className={styles.box} />
         <code>{tokenColor || 'None'}</code>
       </Space>
       <div style={{ fontSize: 12, color: token.colorTextLabel, marginLeft: 8 }}>

docs/demos/api/createStyles/default.tsx

@@ -3,7 +3,7 @@
  * defaultShowCode: true
  */
 import { SmileOutlined } from '@ant-design/icons';
-import { Button, Space } from 'antd';
+import { Button, Space, version } from 'antd';
 import { createStyles } from 'antd-style';
 
 const useStyles = createStyles(({ cssVar, css, cx }) => {
@@ -38,7 +38,7 @@ const App = () => {
   const { styles } = useStyles();
 
   return (
-    <div className={styles.container}>
+    <div className={styles.container} data-antd-ver={version}>
       <Space direction={'vertical'} style={{ width: '100%' }} size={16}>
         <Space>
           <Button title={'功能按钮的说明'} icon={<SmileOutlined />} />

src/factories/createThemeProvider/TokenContainer.tsx

@@ -4,6 +4,7 @@ import { serializeCSS } from '@/core';
 import { useAntdTheme, useThemeMode } from '@/hooks';
 import { StyledThemeProvider, Theme } from '@/types';
 
+import { useCustomToken } from '@/hooks/useCustomToken';
 import type { ThemeProviderProps } from './type';
 
 interface TokenContainerProps<T, S = Record<string, string>>
@@ -25,7 +26,7 @@ const TokenContainer: <T, S>(props: TokenContainerProps<T, S>) => ReactElement |
 }) => {
   const themeState = useThemeMode();
   const { appearance, isDarkMode } = themeState;
-  const { stylish: antdStylish, ...token } = useAntdTheme();
+  const { stylish: antdStylish, cssVar, ...token } = useAntdTheme();
 
   // 获取默认的自定义 token
   const defaultCustomToken = useMemo(() => {
@@ -47,6 +48,13 @@ const TokenContainer: <T, S>(props: TokenContainerProps<T, S>) => ReactElement |
     return { ...defaultCustomToken, ...customTokenOrFn };
   }, [defaultCustomToken, customTokenOrFn, token, appearance]);
 
+  const { token: cssVariableToken, cssVarCls, hashId } = useCustomToken(customToken as any);
+
+  const mergedCssVar = useMemo(
+    () => ({ ...cssVar, ...cssVariableToken }),
+    [cssVar, cssVariableToken],
+  );
+
   // 获取 stylish
   const customStylish = useMemo(() => {
     if (!stylishOrGetStylish) return {};
@@ -68,12 +76,17 @@ const TokenContainer: <T, S>(props: TokenContainerProps<T, S>) => ReactElement |
   const theme: Theme = {
     ...token,
     ...(customToken as any),
+    cssVar: mergedCssVar,
     stylish: stylish as any,
     ...themeState,
     prefixCls,
   };
 
-  return <StyledThemeProvider theme={theme}>{children}</StyledThemeProvider>;
+  return (
+    <StyledThemeProvider theme={theme}>
+      <div className={[cssVarCls, hashId].filter(Boolean).join(' ')}>{children}</div>
+    </StyledThemeProvider>
+  );
 };
 
 export default TokenContainer;

src/hooks/useCustomToken.ts

@@ -0,0 +1,35 @@
+import { CustomToken } from '@/types';
+import { useCacheToken } from '@ant-design/cssinjs';
+import { useToken as useInternalToken } from 'antd/lib/theme/internal';
+import React from 'react';
+
+function useCssVarConf() {
+  const [theme, realToken, hashId, token, cssVar, zeroRuntime] = useInternalToken();
+  const themeKey = React.useId();
+
+  const mergeCssVar = {
+    ...cssVar,
+    key: `antd-style-${cssVar?.key}-${themeKey.replace(/:/g, '')}`,
+  };
+
+  // copied from https://github.com/ant-design/ant-design/blob/4e8d79581e4ec2b4a4cf7abf2e1ee4e939ba1a90/components/theme/util/genStyleUtils.ts#L25-L27
+  return { theme, realToken, hashId, token, cssVar: mergeCssVar, zeroRuntime };
+}
+
+export function useCustomToken(customToken: CustomToken) {
+  const { theme, cssVar } = useCssVarConf();
+
+  const [token, hashId, realToken] = useCacheToken<CustomToken>(theme, [], {
+    salt: 'antd-style',
+    override: customToken || {},
+    getComputedToken: (_, override) => override as any,
+    cssVar,
+  });
+
+  return {
+    token,
+    hashId,
+    realToken,
+    cssVarCls: cssVar.key ?? '',
+  };
+}

src/types/theme.ts

@@ -1,5 +1,5 @@
 import { MappingAlgorithm, ThemeConfig } from 'antd';
-import { AliasToken } from 'antd/es/theme/interface';
+import { AliasToken, GlobalToken } from 'antd/es/theme/interface';
 
 import { BrowserPrefers, ThemeAppearance, ThemeMode } from './appearance';
 
@@ -66,6 +66,7 @@ export interface FullStylish extends AntdStylish, CustomStylish {}
 
 export interface AntdTheme extends AntdToken {
   stylish: AntdStylish;
+  cssVar: GlobalToken;
 }
 
 export interface FullToken extends AntdToken, CustomToken {}