diff --git a/components/_util/theme/default.tsx b/components/_util/theme/default.tsx
index d87ff604e2..75ea4b7b47 100644
--- a/components/_util/theme/default.tsx
+++ b/components/_util/theme/default.tsx
@@ -19,6 +19,7 @@ const defaultDesignToken: DesignToken = {
   fontSize: 14,
   textColor: new TinyColor('#000').setAlpha(0.85).toRgbString(),
   textColorDisabled: new TinyColor('#000').setAlpha(0.25).toRgbString(),
+  textColorInverse: '#fff',
 
   itemHoverBackground: '#f5f5f5',
 
diff --git a/components/_util/theme/index.tsx b/components/_util/theme/index.tsx
index ae3fad661a..b9e04f8ba8 100644
--- a/components/_util/theme/index.tsx
+++ b/components/_util/theme/index.tsx
@@ -21,6 +21,7 @@ export interface DesignToken {
   fontSize: number;
   textColor: string;
   textColorDisabled: string;
+  textColorInverse: string;
 
   itemHoverBackground: string;
 
@@ -104,18 +105,24 @@ export const DesignTokenContext = React.createContext<{
 });
 
 // ================================== Hook ==================================
-export function useToken() {
+export function useToken(): [Theme<DesignToken, DerivativeToken>, DerivativeToken, string] {
   const { token: rootDesignToken, hashed } = React.useContext(DesignTokenContext);
   const theme = React.useContext(ThemeContext);
 
   const salt = `${version}-${hashed || ''}`;
 
-  const [token, hashId] = useCacheToken(theme, [defaultDesignToken, rootDesignToken], {
-    salt,
-  });
+  const [token, hashId] = useCacheToken<DerivativeToken, DesignToken>(
+    theme,
+    [defaultDesignToken, rootDesignToken],
+    {
+      salt,
+    },
+  );
   return [theme, token, hashed ? hashId : ''];
 }
 
+export type UseComponentStyleResult = [(node: React.ReactNode) => React.ReactElement, string];
+
 // ================================== Util ==================================
 export function withPrefix(
   style: CSSObject,
diff --git a/components/button/button.tsx b/components/button/button.tsx
index ad80d5e8be..794cdc4b90 100644
--- a/components/button/button.tsx
+++ b/components/button/button.tsx
@@ -159,7 +159,7 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
   const prefixCls = getPrefixCls('btn', customizePrefixCls);
 
   // Style
-  const wrapSSR = useStyle(prefixCls, iconPrefixCls);
+  const [wrapSSR, hashId] = useStyle(prefixCls, iconPrefixCls);
 
   const size = React.useContext(SizeContext);
   const [innerLoading, setLoading] = React.useState<Loading>(!!loading);
@@ -244,6 +244,7 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
 
   const classes = classNames(
     prefixCls,
+    hashId,
     {
       [`${prefixCls}-${shape}`]: shape !== 'default' && shape, // Note: Shape also has `default`
       [`${prefixCls}-${type}`]: type,
diff --git a/components/button/style/index.tsx b/components/button/style/index.tsx
index 60ae2befae..bf3cef3b7e 100644
--- a/components/button/style/index.tsx
+++ b/components/button/style/index.tsx
@@ -1,7 +1,13 @@
 // deps-lint-skip-all
 import { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
 import { TinyColor } from '@ctrl/tinycolor';
-import { DerivativeToken, useStyleRegister, useToken, withPrefix } from '../../_util/theme';
+import {
+  DerivativeToken,
+  UseComponentStyleResult,
+  useStyleRegister,
+  useToken,
+  withPrefix,
+} from '../../_util/theme';
 
 // ============================== Shared ==============================
 const genSharedButtonStyle = (
@@ -373,19 +379,25 @@ const genSizeLargeButtonStyle = (
 };
 
 // ============================== Export ==============================
-export default function useStyle(prefixCls: string, iconPrefixCls: string) {
+export default function useStyle(
+  prefixCls: string,
+  iconPrefixCls: string,
+): UseComponentStyleResult {
   const [theme, token, hashId] = useToken();
 
-  return useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [
-    // Shared
-    withPrefix(genSharedButtonStyle(prefixCls, iconPrefixCls, token), prefixCls),
+  return [
+    useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [
+      // Shared
+      withPrefix(genSharedButtonStyle(prefixCls, iconPrefixCls, token), prefixCls),
 
-    // Size
-    genSizeSmallButtonStyle(prefixCls, iconPrefixCls, token),
-    genSizeBaseButtonStyle(prefixCls, iconPrefixCls, token),
-    genSizeLargeButtonStyle(prefixCls, iconPrefixCls, token),
+      // Size
+      genSizeSmallButtonStyle(prefixCls, iconPrefixCls, token),
+      genSizeBaseButtonStyle(prefixCls, iconPrefixCls, token),
+      genSizeLargeButtonStyle(prefixCls, iconPrefixCls, token),
 
-    // Group (type, ghost, danger, disabled, loading)
-    genTypeButtonStyle(prefixCls, token),
-  ]);
+      // Group (type, ghost, danger, disabled, loading)
+      genTypeButtonStyle(prefixCls, token),
+    ]),
+    hashId,
+  ];
 }
diff --git a/components/checkbox/Checkbox.tsx b/components/checkbox/Checkbox.tsx
index 8f6635cd2f..fb0d0b47c7 100644
--- a/components/checkbox/Checkbox.tsx
+++ b/components/checkbox/Checkbox.tsx
@@ -85,7 +85,7 @@ const InternalCheckbox: React.ForwardRefRenderFunction<HTMLInputElement, Checkbo
   }, [restProps.value]);
 
   const prefixCls = getPrefixCls('checkbox', customizePrefixCls);
-  const wrapSSR = useStyle(prefixCls);
+  const [wrapSSR, hashId] = useStyle(prefixCls);
 
   const checkboxProps: CheckboxProps = { ...restProps };
   if (checkboxGroup && !skipGroup) {
@@ -109,10 +109,14 @@ const InternalCheckbox: React.ForwardRefRenderFunction<HTMLInputElement, Checkbo
       [`${prefixCls}-wrapper-disabled`]: checkboxProps.disabled,
     },
     className,
+    hashId,
+  );
+  const checkboxClass = classNames(
+    {
+      [`${prefixCls}-indeterminate`]: indeterminate,
+    },
+    hashId,
   );
-  const checkboxClass = classNames({
-    [`${prefixCls}-indeterminate`]: indeterminate,
-  });
   return wrapSSR(
     // eslint-disable-next-line jsx-a11y/label-has-associated-control
     <label
diff --git a/components/checkbox/Group.tsx b/components/checkbox/Group.tsx
index faca13268c..493542dc86 100644
--- a/components/checkbox/Group.tsx
+++ b/components/checkbox/Group.tsx
@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import omit from 'rc-util/lib/omit';
 import Checkbox, { CheckboxChangeEvent } from './Checkbox';
 import { ConfigContext } from '../config-provider';
+import useStyle from './style';
 
 export type CheckboxValueType = string | number | boolean;
 
@@ -112,6 +113,8 @@ const InternalCheckboxGroup: React.ForwardRefRenderFunction<HTMLDivElement, Chec
   const prefixCls = getPrefixCls('checkbox', customizePrefixCls);
   const groupPrefixCls = `${prefixCls}-group`;
 
+  const [wrapSSR, hashId] = useStyle(prefixCls);
+
   const domProps = omit(restProps, ['value', 'disabled']);
 
   if (options && options.length > 0) {
@@ -147,11 +150,12 @@ const InternalCheckboxGroup: React.ForwardRefRenderFunction<HTMLDivElement, Chec
       [`${groupPrefixCls}-rtl`]: direction === 'rtl',
     },
     className,
+    hashId,
   );
-  return (
+  return wrapSSR(
     <div className={classString} style={style} {...domProps} ref={ref}>
       <GroupContext.Provider value={context}>{children}</GroupContext.Provider>
-    </div>
+    </div>,
   );
 };
 
diff --git a/components/checkbox/style/index.tsx b/components/checkbox/style/index.tsx
index 2b23dd36f1..c68b940d2a 100644
--- a/components/checkbox/style/index.tsx
+++ b/components/checkbox/style/index.tsx
@@ -1,6 +1,12 @@
 // deps-lint-skip-all
-import { CSSObject, Keyframes } from '@ant-design/cssinjs';
-import { DerivativeToken, useStyleRegister, useToken, resetComponent } from '../../_util/theme';
+import { CSSInterpolation, Keyframes } from '@ant-design/cssinjs';
+import {
+  DerivativeToken,
+  useStyleRegister,
+  useToken,
+  resetComponent,
+  UseComponentStyleResult,
+} from '../../_util/theme';
 
 // ============================== Motion ==============================
 const antCheckboxEffect = new Keyframes('antCheckboxEffect', {
@@ -20,199 +26,211 @@ export const genCheckboxStyle = (
   prefixCls: string,
   token: DerivativeToken,
   hashId: string,
-): CSSObject => {
+): CSSInterpolation => {
   const checkboxCls = `.${prefixCls}`;
   const wrapperCls = `${checkboxCls}-wrapper`;
 
-  return {
-    // Group
-    [`${checkboxCls}-group`]: {
-      ...resetComponent(token),
+  return [
+    // ===================== Basic =====================
+    {
+      // Group
+      [`${checkboxCls}-group`]: {
+        ...resetComponent(token),
 
-      display: 'inline-flex',
-    },
-
-    // Wrapper
-    [wrapperCls]: {
-      ...resetComponent(token),
-
-      display: 'inline-flex',
-      alignItems: 'baseline',
-      lineHeight: 'unset',
-      cursor: 'pointer',
-
-      // Fix checkbox & radio in flex align #30260
-      '&:after': {
-        display: 'inline-block',
-        width: 0,
-        overflow: 'hidden',
-        content: "'\\a0'",
+        display: 'inline-flex',
       },
 
-      // Checkbox near checkbox
-      '& + &': {
-        marginInlineStart: token.marginXS,
-      },
-    },
+      // Wrapper
+      [wrapperCls]: {
+        ...resetComponent(token),
 
-    // Wrapper > Checkbox
-    [checkboxCls]: {
-      ...resetComponent(token),
-
-      top: '0.2em',
-      position: 'relative',
-      whiteSpace: 'nowrap',
-      lineHeight: 1,
-      cursor: 'pointer',
-
-      // Wrapper > Checkbox > input
-      '&-input': {
-        position: 'absolute',
-        inset: 0,
-        zIndex: 1,
-        width: '100%',
-        height: '100%',
+        display: 'inline-flex',
+        alignItems: 'baseline',
+        lineHeight: 'unset',
         cursor: 'pointer',
-        opacity: 0,
-      },
-
-      // Wrapper > Checkbox > inner
-      '&-inner': {
-        position: 'relative',
-        top: 0,
-        left: 0,
-        display: 'block',
-        width: token.fontSizeLG,
-        height: token.fontSizeLG,
-        direction: 'ltr',
-        backgroundColor: token.componentBackground,
-        border: `${token.borderWidth}px ${token.borderStyle} ${token.borderColor}`,
-        borderRadius: token.borderRadius,
-        borderCollapse: 'separate',
-        transition: `all ${token.duration}`,
 
+        // Fix checkbox & radio in flex align #30260
         '&:after': {
-          position: 'absolute',
-          top: '50%',
-          left: '21.5%',
-          display: 'table',
-          width: (token.fontSizeLG / 14) * 5,
-          height: (token.fontSizeLG / 14) * 8,
-          border: `2px solid ${token.componentBackground}`,
-          borderTop: 0,
-          borderLeft: 0,
-          transform: 'rotate(45deg) scale(0) translate(-50%,-50%)',
-          opacity: 0,
-          transition: `all ${token.durationFast} cubic-bezier(.71,-.46,.88,.6), opacity ${token.durationFast}`,
-          content: '""',
+          display: 'inline-block',
+          width: 0,
+          overflow: 'hidden',
+          content: "'\\a0'",
+        },
+
+        // Checkbox near checkbox
+        '& + &': {
+          marginInlineStart: token.marginXS,
         },
       },
 
-      // Wrapper > Checkbox + Text
-      '& + span': {
-        paddingLeft: token.paddingXS,
-        paddingRight: token.paddingXS,
+      // Wrapper > Checkbox
+      [checkboxCls]: {
+        ...resetComponent(token),
+
+        top: '0.2em',
+        position: 'relative',
+        whiteSpace: 'nowrap',
+        lineHeight: 1,
+        cursor: 'pointer',
+
+        // Wrapper > Checkbox > input
+        [`${checkboxCls}-input`]: {
+          position: 'absolute',
+          inset: 0,
+          zIndex: 1,
+          width: '100%',
+          height: '100%',
+          cursor: 'pointer',
+          opacity: 0,
+        },
+
+        // Wrapper > Checkbox > inner
+        [`${checkboxCls}-inner`]: {
+          position: 'relative',
+          top: 0,
+          left: 0,
+          display: 'block',
+          width: token.fontSizeLG,
+          height: token.fontSizeLG,
+          direction: 'ltr',
+          backgroundColor: token.componentBackground,
+          border: `${token.borderWidth}px ${token.borderStyle} ${token.borderColor}`,
+          borderRadius: token.borderRadius,
+          borderCollapse: 'separate',
+          transition: `all ${token.duration}`,
+
+          '&:after': {
+            position: 'absolute',
+            top: '50%',
+            left: '21.5%',
+            display: 'table',
+            width: (token.fontSizeLG / 14) * 5,
+            height: (token.fontSizeLG / 14) * 8,
+            border: `2px solid ${token.componentBackground}`,
+            borderTop: 0,
+            borderLeft: 0,
+            transform: 'rotate(45deg) scale(0) translate(-50%,-50%)',
+            opacity: 0,
+            transition: `all ${token.durationFast} cubic-bezier(.71,-.46,.88,.6), opacity ${token.durationFast}`,
+            content: '""',
+          },
+        },
+
+        // Wrapper > Checkbox + Text
+        '& + span': {
+          paddingLeft: token.paddingXS,
+          paddingRight: token.paddingXS,
+        },
       },
     },
 
     // ================= Indeterminate =================
-    [`${checkboxCls}-indeterminate`]: {
-      // Wrapper > Checkbox > inner
-      [`${checkboxCls}-inner`]: {
-        '&:after': {
-          top: '50%',
-          left: '50%',
-          width: token.fontSizeLG / 2,
-          height: token.fontSizeLG / 2,
-          backgroundColor: token.primaryColor,
-          border: 0,
-          transform: 'translate(-50%, -50%) scale(1)',
-          opacity: 1,
-          content: '""',
+    {
+      [checkboxCls]: {
+        '&-indeterminate': {
+          // Wrapper > Checkbox > inner
+          [`${checkboxCls}-inner`]: {
+            '&:after': {
+              top: '50%',
+              left: '50%',
+              width: token.fontSizeLG / 2,
+              height: token.fontSizeLG / 2,
+              backgroundColor: token.primaryColor,
+              border: 0,
+              transform: 'translate(-50%, -50%) scale(1)',
+              opacity: 1,
+              content: '""',
+            },
+          },
         },
       },
     },
 
     // ===================== Hover =====================
-    // Wrapper
-    [`${wrapperCls}:hover ${checkboxCls}:after`]: {
-      visibility: 'visible',
-    },
+    {
+      // Wrapper
+      [`${wrapperCls}:hover ${checkboxCls}:after`]: {
+        visibility: 'visible',
+      },
 
-    // Wrapper & Wrapper > Checkbox
-    [`
+      // Wrapper & Wrapper > Checkbox
+      [`
       ${wrapperCls}:hover:not(${wrapperCls}-disabled),
       ${checkboxCls}:hover:not(${checkboxCls}-disabled),
       ${checkboxCls}-input:focus +
     `]: {
-      [`${checkboxCls}-inner`]: {
-        borderColor: token.primaryColor,
+        [`${checkboxCls}-inner`]: {
+          borderColor: token.primaryColor,
+        },
       },
     },
 
     // ==================== Checked ====================
+    {
+      // Wrapper > Checkbox
+      [`${checkboxCls}-checked`]: {
+        [`${checkboxCls}-inner`]: {
+          backgroundColor: token.primaryColor,
+          borderColor: token.primaryColor,
 
-    // Wrapper > Checkbox
-    [`${checkboxCls}-checked`]: {
-      [`${checkboxCls}-inner`]: {
-        backgroundColor: token.primaryColor,
-        borderColor: token.primaryColor,
-
-        '&:after': {
-          opacity: 1,
-          transform: 'rotate(45deg) scale(1) translate(-50%,-50%)',
-          transition: `all ${token.duration} ${token.easeOutBack} 0.1s`,
+          '&:after': {
+            opacity: 1,
+            transform: 'rotate(45deg) scale(1) translate(-50%,-50%)',
+            transition: `all ${token.duration} ${token.easeOutBack} 0.1s`,
+          },
         },
-      },
 
-      // Checked Effect
-      '&:after': {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: '100%',
-        border: `${token.borderWidth}px ${token.borderStyle} ${token.primaryColor}`,
-        borderRadius: token.borderRadius,
-        visibility: 'hidden',
-        animation: `${antCheckboxEffect.getName(hashId)} ${token.duration} ease-in-out`,
-        animationFillMode: 'backwards',
-        content: '""',
+        // Checked Effect
+        '&:after': {
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: '100%',
+          border: `${token.borderWidth}px ${token.borderStyle} ${token.primaryColor}`,
+          borderRadius: token.borderRadius,
+          visibility: 'hidden',
+          animation: `${antCheckboxEffect.getName(hashId)} ${token.duration} ease-in-out`,
+          animationFillMode: 'backwards',
+          content: '""',
+        },
       },
     },
 
     // ==================== Disable ====================
-    // Wrapper
-    [`${wrapperCls}-disabled`]: {
-      cursor: 'not-allowed',
-    },
-
-    // Wrapper > Checkbox
-    [`${checkboxCls}-disabled`]: {
-      // Wrapper > Checkbox > input
-      [`&, ${checkboxCls}-input`]: {
+    {
+      // Wrapper
+      [`${wrapperCls}-disabled`]: {
         cursor: 'not-allowed',
       },
 
-      // Wrapper > Checkbox > inner
-      [`${checkboxCls}-inner`]: {
-        background: token.background,
-        borderColor: token.borderColor,
+      // Wrapper > Checkbox
+      [`${checkboxCls}-disabled`]: {
+        // Wrapper > Checkbox > input
+        [`&, ${checkboxCls}-input`]: {
+          cursor: 'not-allowed',
+        },
+
+        // Wrapper > Checkbox > inner
+        [`${checkboxCls}-inner`]: {
+          background: token.background,
+          borderColor: token.borderColor,
+
+          '&:after': {
+            borderColor: token.borderColor,
+          },
+        },
 
         '&:after': {
-          borderColor: token.borderColor,
+          display: 'none',
+        },
+
+        '& + span': {
+          color: token.textColorDisabled,
         },
       },
-
-      '&:after': {
-        display: 'none',
-      },
-
-      '& + span': {
-        color: token.textColorDisabled,
-      },
     },
-  };
+  ];
 };
 
 // ============================== Export ==============================
@@ -220,10 +238,13 @@ export function getStyle(prefixCls: string, token: DerivativeToken, hashId: stri
   return [genCheckboxStyle(prefixCls, token, hashId), antCheckboxEffect];
 }
 
-export default function useStyle(prefixCls: string) {
+export default function useStyle(prefixCls: string): UseComponentStyleResult {
   const [theme, token, hashId] = useToken();
 
-  return useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () =>
-    getStyle(prefixCls, token, hashId),
-  );
+  return [
+    useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () =>
+      getStyle(prefixCls, token, hashId),
+    ),
+    hashId,
+  ];
 }
diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx
index d74a4003b5..0762c21d2c 100644
--- a/components/config-provider/index.tsx
+++ b/components/config-provider/index.tsx
@@ -85,6 +85,7 @@ export interface ConfigProviderProps {
   dropdownMatchSelectWidth?: boolean;
   theme?: {
     token?: Partial<DesignToken>;
+    hashed?: boolean;
   };
 }
 
@@ -262,10 +263,12 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = props => {
         ...defaultThemeToken,
         ...theme?.token,
       },
+      hashed: theme?.hashed,
     }),
-    [theme?.token],
+    [theme?.token, theme?.hashed],
   );
-  if (theme?.token) {
+
+  if (theme?.token || theme?.hashed) {
     childNode = (
       <DesignTokenContext.Provider value={memoTheme}>{childNode}</DesignTokenContext.Provider>
     );
diff --git a/components/tree/Tree.tsx b/components/tree/Tree.tsx
index 676cad0df0..8b7cee90eb 100644
--- a/components/tree/Tree.tsx
+++ b/components/tree/Tree.tsx
@@ -173,7 +173,7 @@ const Tree = React.forwardRef<RcTree, TreeProps>((props, ref) => {
     dropIndicatorRender,
   };
 
-  const wrapSSR = useStyle(prefixCls);
+  const [wrapSSR, hashId] = useStyle(prefixCls);
 
   const draggableConfig = React.useMemo(() => {
     if (!draggable) {
@@ -216,6 +216,7 @@ const Tree = React.forwardRef<RcTree, TreeProps>((props, ref) => {
           [`${prefixCls}-rtl`]: direction === 'rtl',
         },
         className,
+        hashId,
       )}
       direction={direction}
       checkable={checkable ? <span className={`${prefixCls}-checkbox-inner`} /> : checkable}
diff --git a/components/tree/style/index.tsx b/components/tree/style/index.tsx
index 633bd74dd5..22f7bef36e 100644
--- a/components/tree/style/index.tsx
+++ b/components/tree/style/index.tsx
@@ -3,7 +3,13 @@
 
 // deps-lint-skip-all
 import { CSSObject, CSSInterpolation, Keyframes } from '@ant-design/cssinjs';
-import { DerivativeToken, useStyleRegister, useToken, resetComponent } from '../../_util/theme';
+import {
+  DerivativeToken,
+  useStyleRegister,
+  useToken,
+  resetComponent,
+  UseComponentStyleResult,
+} from '../../_util/theme';
 import { getStyle as getCheckboxStyle } from '../../checkbox/style';
 
 // ============================ Keyframes =============================
@@ -80,7 +86,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken, hashId: string
       },
 
       // =================== Virtual List ===================
-      '&-list-holder-inner': {
+      [`${treeCls}-list-holder-inner`]: {
         alignItems: 'flex-start',
       },
 
@@ -91,8 +97,6 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken, hashId: string
           // >>> Title
           [`${treeCls}-node-content-wrapper`]: {
             flex: 'auto',
-            display: 'flex',
-            flexWrap: 'nowrap',
           },
 
           // >>> Drag
@@ -147,7 +151,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken, hashId: string
       },
 
       // >>> Indent
-      '&-indent': {
+      [`${treeCls}-indent`]: {
         alignSelf: 'stretch',
         whiteSpace: 'nowrap',
         userSelect: 'none',
@@ -158,7 +162,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken, hashId: string
       },
 
       // >>> Drag Handler
-      '&-draggable-icon': {
+      [`${treeCls}-draggable-icon`]: {
         width: treeTitleHeight,
         lineHeight: `${treeTitleHeight}px`,
         textAlign: 'center',
@@ -171,7 +175,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken, hashId: string
       },
 
       // >>> Switcher
-      '&-switcher': {
+      [`${treeCls}-switcher`]: {
         ...getSwitchStyle(prefixCls, token),
         position: 'relative',
         flex: 'none',
@@ -228,14 +232,16 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken, hashId: string
       },
 
       // >>> Checkbox
-      '&-checkbox': {
+      [`${treeCls}-checkbox`]: {
         top: 'initial',
         marginInlineEnd: treeCheckBoxMarginHorizontal,
         marginBlockStart: treeCheckBoxMarginVertical,
       },
 
       // >>> Title
-      '& &-node-content-wrapper': {
+      [`& ${treeCls}-node-content-wrapper`]: {
+        display: 'flex',
+        flexWrap: 'nowrap',
         position: 'relative',
         zIndex: 'auto',
         minHeight: treeTitleHeight,
@@ -272,12 +278,12 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken, hashId: string
       },
 
       // https://github.com/ant-design/ant-design/issues/28217
-      '&-unselectable &-node-content-wrapper:hover': {
+      [`${treeCls}-unselectable ${treeCls}-node-content-wrapper:hover`]: {
         backgroundColor: 'transparent',
       },
 
       // ==================== Draggable =====================
-      '&-node-content-wrapper': {
+      [`${treeCls}-node-content-wrapper`]: {
         lineHeight: `${treeTitleHeight}px`,
         userSelect: 'none',
 
@@ -366,7 +372,7 @@ export const genRTLStyle = (token: TreeToken): CSSObject => {
       },
 
       // >>> Switcher
-      '&-switcher': {
+      [`${treeCls}-switcher`]: {
         '&_close': {
           [`${treeCls}-switcher-icon`]: {
             svg: {
@@ -398,6 +404,84 @@ export const genRTLStyle = (token: TreeToken): CSSObject => {
   };
 };
 
+// ============================ Directory =============================
+export const genDirectoryStyle = (token: TreeToken): CSSObject => {
+  const { treeCls, treeNodeCls, treeNodePadding } = token;
+
+  return {
+    [`${treeCls}${treeCls}-directory`]: {
+      // ================== TreeNode ==================
+      [treeNodeCls]: {
+        position: 'relative',
+
+        // Hover color
+        '&:before': {
+          position: 'absolute',
+          top: 0,
+          right: 0,
+          bottom: treeNodePadding,
+          left: 0,
+          transition: `background-color ${token.duration}`,
+          content: '""',
+          pointerEvents: 'none',
+        },
+
+        '&:hover': {
+          '&:before': {
+            background: token.itemHoverBackground,
+          },
+        },
+
+        // Elements
+        '> *': {
+          zIndex: 1,
+        },
+
+        // >>> Switcher
+        [`${treeCls}-switcher`]: {
+          transition: `color ${token.duration}`,
+        },
+
+        // >>> Title
+        [`${treeCls}-node-content-wrapper`]: {
+          borderRadius: 0,
+          userSelect: 'none',
+
+          '&:hover': {
+            background: 'transparent',
+          },
+
+          [`&.${treeCls}-node-selected`]: {
+            color: token.textColorInverse,
+            background: 'transparent',
+          },
+        },
+
+        // ============= Selected =============
+        '&-selected': {
+          [`
+            &:hover::before,
+            &::before
+          `]: {
+            background: token.primaryColor,
+          },
+
+          // >>> Switcher
+          [`${treeCls}-switcher`]: {
+            color: token.textColorInverse,
+          },
+
+          // >>> Title
+          [`${treeCls}-node-content-wrapper`]: {
+            color: token.textColorInverse,
+            background: 'transparent',
+          },
+        },
+      },
+    },
+  };
+};
+
 // ============================== Merged ==============================
 export const genTreeStyle = (
   prefixCls: string,
@@ -423,16 +507,21 @@ export const genTreeStyle = (
     genBaseStyle(prefixCls, treeToken, hashId),
     // RTL
     genRTLStyle(treeToken),
+    // Directory
+    genDirectoryStyle(treeToken),
   ];
 };
 
 // ============================== Export ==============================
-export default function useStyle(prefixCls: string) {
+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,
-  ]);
+  return [
+    useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [
+      getCheckboxStyle(`${prefixCls}-checkbox`, token, hashId),
+      genTreeStyle(prefixCls, token, hashId),
+      treeNodeFX,
+    ]),
+    hashId,
+  ];
 }
diff --git a/package.json b/package.json
index 9133e377e7..680306229a 100644
--- a/package.json
+++ b/package.json
@@ -113,7 +113,7 @@
   ],
   "dependencies": {
     "@ant-design/colors": "^6.0.0",
-    "@ant-design/cssinjs": "~0.0.0-alpha.10",
+    "@ant-design/cssinjs": "~0.0.0-alpha.12",
     "@ant-design/icons": "^4.7.0",
     "@ant-design/react-slick": "~0.28.1",
     "@babel/runtime": "^7.12.5",
diff --git a/site/theme/template/Layout/DynamicTheme.tsx b/site/theme/template/Layout/DynamicTheme.tsx
index 04061a0c61..9b67b51bc0 100644
--- a/site/theme/template/Layout/DynamicTheme.tsx
+++ b/site/theme/template/Layout/DynamicTheme.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { TinyColor } from '@ctrl/tinycolor';
-import { Drawer, Form, Input, Button, InputNumber } from 'antd';
+import { Drawer, Form, Input, Button, InputNumber, Checkbox } from 'antd';
 import { useIntl } from 'react-intl';
 import { BugOutlined } from '@ant-design/icons';
 import { DesignToken } from '../../../../components/_util/theme';
@@ -95,6 +95,10 @@ export default ({ onChangeTheme, defaultToken }: ThemeConfigProps) => {
               </Form.Item>
             );
           })}
+
+          <Form.Item name="hashed" valuePropName="checked">
+            <Checkbox>Bind Style on hash className</Checkbox>
+          </Form.Item>
         </Form>
       </Drawer>
     </>
diff --git a/site/theme/template/Layout/index.jsx b/site/theme/template/Layout/index.jsx
index f642990a87..27acade358 100644
--- a/site/theme/template/Layout/index.jsx
+++ b/site/theme/template/Layout/index.jsx
@@ -82,6 +82,7 @@ export default class Layout extends React.Component {
       direction: 'ltr',
       setIframeTheme: this.setIframeTheme,
       designToken: defaultDesignToken,
+      hashedStyle: true,
     };
   }
 
@@ -210,8 +211,16 @@ export default class Layout extends React.Component {
 
   render() {
     const { children, helmetContext = {}, ...restProps } = this.props;
-    const { appLocale, direction, isMobile, theme, setTheme, setIframeTheme, designToken } =
-      this.state;
+    const {
+      appLocale,
+      direction,
+      isMobile,
+      theme,
+      setTheme,
+      setIframeTheme,
+      designToken,
+      hashedStyle,
+    } = this.state;
     const title =
       appLocale.locale === 'zh-CN'
         ? 'Ant Design - 一套企业级 UI 设计语言和 React 组件库'
@@ -255,17 +264,23 @@ export default class Layout extends React.Component {
               direction={direction}
               theme={{
                 token: designToken,
+                hashed: hashedStyle,
               }}
             >
               <Header {...restProps} changeDirection={this.changeDirection} />
               {children}
 
               <DynamicTheme
-                defaultToken={designToken}
+                defaultToken={{
+                  ...designToken,
+                  hashed: hashedStyle,
+                }}
                 onChangeTheme={newToken => {
                   console.log('Change Theme:', newToken);
+                  const { hashed, ...restToken } = newToken;
                   this.setState({
-                    designToken: newToken,
+                    designToken: restToken,
+                    hashedStyle: hashed,
                   });
                 }}
               />