fix: Fix custom theme token

components/_util/cssinjs/hooks/useCacheToken.tsx

@@ -90,7 +90,6 @@ export const getComputedToken = <DerivativeToken = object, DesignToken = Derivat
   format?: (token: DesignToken) => DerivativeToken,
 ) => {
   const derivativeToken = theme.getDerivativeToken(originToken);
-
   // Merge with override
   let mergedDerivativeToken = {
     ...derivativeToken,
@@ -150,7 +149,6 @@ export default function useCacheToken<DerivativeToken = object, DesignToken = De
 
       const hashId = `${hashPrefix}-${hash(tokenKey)}`;
       mergedDerivativeToken._hashId = hashId; // Not used
-
       return [mergedDerivativeToken, hashId];
     },
     cache => {

components/_util/static-style-extract/__tests__/index.test.js

@@ -1,6 +1,7 @@
 // import { StyleProvider } from '../../cssinjs';
 import { extractStyle } from '../index';
 import { ConfigProvider } from '../../../components';
+import { theme } from '../../../index';
 
 const testGreenColor = '#008000';
 describe('Static-Style-Extract', () => {
@@ -26,6 +27,25 @@ describe('Static-Style-Extract', () => {
     expect(cssText).toContain(testGreenColor);
     expect(cssText).toMatchSnapshot();
   });
+
+  it('should extract static styles with customTheme and customStyle', () => {
+    const cssText = extractStyle(node => {
+      return (
+        <ConfigProvider
+          theme={{
+            algorithm: theme.darkAlgorithm,
+            token: {
+              colorPrimary: testGreenColor,
+            },
+          }}
+        >
+          {node}
+        </ConfigProvider>
+      );
+    });
+    expect(cssText).toContain('#037003');
+    expect(cssText).toMatchSnapshot();
+  });
   // it('with custom hashPriority', () => {
   //   const cssText = extractStyle(
   //     (node) => (

components/button/style/index.ts

@@ -495,7 +495,6 @@ const genBlockButtonStyle: GenerateStyle<ButtonToken> = token => {
 // ============================== Export ==============================
 export default genComponentStyleHook('Button', token => {
   const { controlTmpOutline, paddingContentHorizontal } = token;
-
   const buttonToken = mergeToken<ButtonToken>(token, {
     colorOutlineDefault: controlTmpOutline,
     buttonPaddingHorizontal: paddingContentHorizontal,

components/config-provider/index.tsx

@@ -232,7 +232,6 @@ const ConfigProvider = defineComponent({
         algorithm && (!Array.isArray(algorithm) || algorithm.length > 0)
           ? createTheme(algorithm)
           : undefined;
-
       return {
         ...rest,
         theme: themeObj,

components/theme/internal.ts

@@ -21,7 +21,7 @@ import statisticToken, { merge as mergeToken, statistic } from './util/statistic
 import type { VueNode } from '../_util/type';
 import { objectType } from '../_util/type';
 import type { ComputedRef, InjectionKey, Ref } from 'vue';
-import { defineComponent, provide, computed, inject, watchEffect, ref } from 'vue';
+import { unref, defineComponent, provide, computed, inject, watchEffect, ref } from 'vue';
 import { toReactive } from '../_util/toReactive';
 
 const defaultTheme = createTheme(defaultDerivative);
@@ -61,26 +61,30 @@ export interface DesignTokenContext {
   hashed?: string | boolean;
 }
 //defaultConfig
-const DesignTokenContextKey: InjectionKey<DesignTokenContext> = Symbol('DesignTokenContext');
+const DesignTokenContextKey: InjectionKey<ComputedRef<DesignTokenContext>> =
+  Symbol('DesignTokenContext');
 
 export const globalDesignTokenApi = ref<DesignTokenContext>();
 
-export const useDesignTokenProvider = (value: DesignTokenContext) => {
+export const useDesignTokenProvider = (value: ComputedRef<DesignTokenContext>) => {
   provide(DesignTokenContextKey, value);
   watchEffect(() => {
-    globalDesignTokenApi.value = value;
+    globalDesignTokenApi.value = toReactive(value);
   });
 };
 
 export const useDesignTokenInject = () => {
-  return inject(DesignTokenContextKey, globalDesignTokenApi.value || defaultConfig);
+  return inject(
+    DesignTokenContextKey,
+    computed(() => globalDesignTokenApi.value || defaultConfig),
+  );
 };
 export const DesignTokenProvider = defineComponent({
   props: {
     value: objectType<DesignTokenContext>(),
   },
   setup(props, { slots }) {
-    useDesignTokenProvider(toReactive(computed(() => props.value)));
+    useDesignTokenProvider(computed(() => props.value));
     return () => {
       return slots.default?.();
     };
@@ -92,9 +96,11 @@ export function useToken(): [
   ComputedRef<GlobalToken>,
   ComputedRef<string>,
 ] {
-  const designTokenContext = inject<DesignTokenContext>(
-    DesignTokenContextKey,
-    globalDesignTokenApi.value || defaultConfig,
+  const designTokenContext = unref(
+    inject<ComputedRef<DesignTokenContext>>(
+      DesignTokenContextKey,
+      computed(() => globalDesignTokenApi.value || defaultConfig),
+    ),
   );
 
   const salt = computed(() => `${version}-${designTokenContext.hashed || ''}`);