diff --git a/src/StyleContext.tsx b/src/StyleContext.tsx
index ee261ee..84c3a72 100644
--- a/src/StyleContext.tsx
+++ b/src/StyleContext.tsx
@@ -81,8 +81,6 @@ export interface StyleContextProps {
   /** Hardcode here since transformer not support take effect on serialize currently */
   autoPrefix?: boolean;
 
-  /** Nonce for CSP (Content Security Policy) */
-  nonce?: string | (() => string);
 }
 
 const StyleContext = React.createContext<StyleContextProps>({
diff --git a/src/hooks/useCSSVarRegister.ts b/src/hooks/useCSSVarRegister.ts
index 8ace839..c4dfb82 100644
--- a/src/hooks/useCSSVarRegister.ts
+++ b/src/hooks/useCSSVarRegister.ts
@@ -31,15 +31,15 @@ const useCSSVarRegister = <V, T extends Record<string, V>>(
     scope?: string | string[];
     token: any;
     hashId?: string;
+    nonce?: string | (() => string);
   },
   fn: () => T,
 ) => {
-  const { key, prefix, unitless, ignore, token, hashId, scope } = config;
+  const { key, prefix, unitless, ignore, token, hashId, scope, nonce } = config;
   const {
     cache: { instanceId },
     container,
     hashPriority,
-    nonce,
   } = useContext(StyleContext);
   const { _tokenKey: tokenKey } = token;
 
diff --git a/src/hooks/useCacheToken.tsx b/src/hooks/useCacheToken.tsx
index 847d7bc..ebba04c 100644
--- a/src/hooks/useCacheToken.tsx
+++ b/src/hooks/useCacheToken.tsx
@@ -67,6 +67,7 @@ export interface Option<DerivativeToken, DesignToken> {
     preserve?: Record<string, boolean>;
     /** Key for current theme. Useful for customizing and should be unique */
     key: string;
+    nonce?: string | (() => string);
   };
 }
 
@@ -161,7 +162,6 @@ export default function useCacheToken<
     cache: { instanceId },
     container,
     hashPriority,
-    nonce,
   } = useContext(StyleContext);
   const {
     salt = '',
@@ -169,6 +169,7 @@ export default function useCacheToken<
     formatToken,
     getComputedToken: compute,
     cssVar,
+    nonce,
   } = option;
 
   // Basic - We do basic cache here
diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
index a8ba370..6bcb7bc 100644
--- a/tests/index.spec.tsx
+++ b/tests/index.spec.tsx
@@ -507,26 +507,46 @@ describe('csssinjs', () => {
     test('function', () => 'bamboo');
   });
 
-  describe('StyleProvider nonce for CSS var', () => {
-    function testWithStyleProvider(name: string, nonce: string | (() => string)) {
-      it(name, () => {
-        const { unmount } = render(
-          <StyleProvider cache={createCache()} nonce={nonce}>
-            <Box />
-          </StyleProvider>,
-        );
+  describe('useCacheToken with nonce parameter', () => {
+    it('should apply nonce from parameter (string)', () => {
+      const NonceBox = () => {
+        const [token] = useCacheToken<DerivativeToken>(theme, [baseToken], {
+          cssVar: {
+            key: 'css-var-test',
+          },
+          nonce: 'bamboo',
+        });
 
-        const styles = Array.from(document.head.querySelectorAll('style'));
-        // Box 组件使用 useCacheToken 注册 CSS var，应该有 nonce
-        const cssVarStyle = styles.find(s => s.innerHTML.includes('--primary-color'));
-        expect(cssVarStyle).toBeDefined();
-        expect(cssVarStyle?.nonce).toBe('bamboo');
-        // unmount 后样式清理行为取决于 cache 配置
-      });
-    }
+        return <div className="box-nonced">{token.primaryColor}</div>;
+      };
+      
+      render(<NonceBox />);
 
-    testWithStyleProvider('string', 'bamboo');
-    testWithStyleProvider('function', () => 'bamboo');
+      const styles = Array.from(document.head.querySelectorAll('style'));
+      const cssVarStyle = styles.find(s => s.innerHTML.includes('--primary-color'));
+      expect(cssVarStyle).toBeDefined();
+      expect(cssVarStyle?.nonce).toBe('bamboo');
+    });
+
+    it('should apply nonce from parameter (function)', () => {
+      const NonceBox = () => {
+        const [token] = useCacheToken<DerivativeToken>(theme, [baseToken], {
+          cssVar: {
+            key: 'css-var-test',
+          },
+          nonce: () => 'bamboo',
+        });
+
+        return <div className="box-nonced">{token.primaryColor}</div>;
+      };
+      
+      render(<NonceBox />);
+
+      const styles = Array.from(document.head.querySelectorAll('style'));
+      const cssVarStyle = styles.find(s => s.innerHTML.includes('--primary-color'));
+      expect(cssVarStyle).toBeDefined();
+      expect(cssVarStyle?.nonce).toBe('bamboo');
+    });
   });
 
   it('should not insert style with different instanceId', () => {