diff --git a/components/config-provider/__tests__/theme.test.tsx b/components/config-provider/__tests__/theme.test.tsx
index f20a3fb22f..2c26233bda 100644
--- a/components/config-provider/__tests__/theme.test.tsx
+++ b/components/config-provider/__tests__/theme.test.tsx
@@ -245,5 +245,27 @@ describe('ConfigProvider.Theme', () => {
         'line-height': 'var(--bar-line-height)',
       });
     });
+
+    it('component token should work', () => {
+      const { container } = render(
+        <ConfigProvider
+          theme={{
+            cssVar: { key: 'foo' },
+            hashed: true,
+            components: { Button: { colorPrimary: '#1890ff', defaultBg: '#000' } },
+          }}
+        >
+          <Button className="button-foo" type="primary">
+            Button
+          </Button>
+        </ConfigProvider>,
+      );
+
+      const btn = container.querySelector('.button-foo')!;
+      expect(btn).toHaveStyle({
+        '--antd-color-primary': '#1890ff',
+        '--antd-button-default-bg': '#000',
+      });
+    });
   });
 });
diff --git a/components/theme/util/genComponentStyleHook.tsx b/components/theme/util/genComponentStyleHook.tsx
index 437f9f0229..2082f102ad 100644
--- a/components/theme/util/genComponentStyleHook.tsx
+++ b/components/theme/util/genComponentStyleHook.tsx
@@ -303,7 +303,7 @@ export const genCSSVarRegister = <C extends OverrideComponent>(
     useCSSVarRegister(
       {
         path: [component],
-        prefix: getCompVarPrefix(component, cssVar.prefix),
+        prefix: cssVar.prefix,
         key: cssVar?.key!,
         unitless: {
           ...unitless,
@@ -316,7 +316,13 @@ export const genCSSVarRegister = <C extends OverrideComponent>(
       },
       () => {
         const defaultToken = getDefaultComponentToken(component, realToken, getDefaultToken);
-        return getComponentToken(component, realToken, defaultToken);
+        const componentToken = getComponentToken(component, realToken, defaultToken);
+        Object.keys(defaultToken).forEach((key) => {
+          componentToken[`${component}${key.slice(0, 1).toUpperCase()}${key.slice(1)}`] =
+            componentToken[key];
+          delete componentToken[key];
+        });
+        return componentToken;
       },
     );
     return null;