diff --git a/components/_util/theme/interface.ts b/components/_util/theme/interface.ts
index 6546da187f..e57b9042cb 100644
--- a/components/_util/theme/interface.ts
+++ b/components/_util/theme/interface.ts
@@ -43,6 +43,7 @@ export interface OverrideToken {
   Button?: ButtonComponentToken;
   Carousel?: {};
   Cascader?: CascaderComponentToken;
+  Checkbox?: {};
   Divider?: DividerComponentToken;
   Empty?: EmptyComponentToken;
   Form?: {};
@@ -52,6 +53,7 @@ export interface OverrideToken {
   Pagination?: {};
   Select?: SelectComponentToken;
   Slider?: SliderComponentToken;
+  Tree?: {};
   TreeSelect?: {};
   Typography?: TypographyComponentToken;
 }
diff --git a/components/checkbox/style/index.tsx b/components/checkbox/style/index.tsx
index b39d451e45..4539fcefa3 100644
--- a/components/checkbox/style/index.tsx
+++ b/components/checkbox/style/index.tsx
@@ -1,15 +1,8 @@
 // deps-lint-skip-all
 import { Keyframes } from '@ant-design/cssinjs';
-import {
-  DerivativeToken,
-  useStyleRegister,
-  useToken,
-  resetComponent,
-  UseComponentStyleResult,
-  GenerateStyle,
-} from '../../_util/theme';
+import { resetComponent, GenerateStyle, genComponentStyleHook, FullToken } from '../../_util/theme';
 
-interface CheckboxToken extends DerivativeToken {
+interface CheckboxToken extends FullToken<'Checkbox'> {
   checkboxCls: string;
 }
 
@@ -242,7 +235,7 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token, hashId) =>
 };
 
 // ============================== Export ==============================
-export function getStyle(prefixCls: string, token: DerivativeToken, hashId: string) {
+export function getStyle(prefixCls: string, token: FullToken<'Checkbox'>, hashId: string) {
   const checkboxToken: CheckboxToken = {
     ...token,
     checkboxCls: `.${prefixCls}`,
@@ -251,13 +244,6 @@ export function getStyle(prefixCls: string, token: DerivativeToken, hashId: stri
   return [genCheckboxStyle(checkboxToken, hashId), antCheckboxEffect];
 }
 
-export default function useStyle(prefixCls: string): UseComponentStyleResult {
-  const [theme, token, hashId] = useToken();
-
-  return [
-    useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () =>
-      getStyle(prefixCls, token, hashId),
-    ),
-    hashId,
-  ];
-}
+export default genComponentStyleHook('Checkbox', (token, { prefixCls, hashId }) => [
+  getStyle(prefixCls, token, hashId),
+]);
diff --git a/components/tree/style/index.tsx b/components/tree/style/index.tsx
index 7a236c39a1..e6f364b831 100644
--- a/components/tree/style/index.tsx
+++ b/components/tree/style/index.tsx
@@ -3,13 +3,7 @@
 
 // deps-lint-skip-all
 import { CSSObject, CSSInterpolation, Keyframes } from '@ant-design/cssinjs';
-import {
-  DerivativeToken,
-  useStyleRegister,
-  useToken,
-  resetComponent,
-  UseComponentStyleResult,
-} from '../../_util/theme';
+import { DerivativeToken, resetComponent, genComponentStyleHook } from '../../_util/theme';
 import { getStyle as getCheckboxStyle } from '../../checkbox/style';
 
 // ============================ Keyframes =============================
@@ -471,15 +465,8 @@ export const genTreeStyle = (
 };
 
 // ============================== Export ==============================
-export default function useStyle(prefixCls: string): UseComponentStyleResult {
-  const [theme, token, hashId] = useToken();
-
-  return [
-    useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [
-      getCheckboxStyle(`${prefixCls}-checkbox`, token, hashId),
-      genTreeStyle(prefixCls, token, hashId),
-      treeNodeFX,
-    ]),
-    hashId,
-  ];
-}
+export default genComponentStyleHook('Tree', (token, { prefixCls, hashId }) => [
+  getCheckboxStyle(`${prefixCls}-checkbox`, token, hashId),
+  genTreeStyle(prefixCls, token, hashId),
+  treeNodeFX,
+]);