refactor: Space support css var (#45869)

components/space/Compact.tsx

@@ -8,6 +8,7 @@ import type { SizeType } from '../config-provider/SizeContext';
 
 import useSize from '../config-provider/hooks/useSize';
 import useStyle from './style';
+import useCSSVar from './style/cssVar';
 
 export interface SpaceCompactItemContextType {
   compactSize?: SizeType;
@@ -80,7 +81,8 @@ const Compact: React.FC<SpaceCompactProps> = (props) => {
   const mergedSize = useSize((ctx) => size ?? ctx);
 
   const prefixCls = getPrefixCls('space-compact', customizePrefixCls);
-  const [wrapSSR, hashId] = useStyle(prefixCls);
+  const [, hashId] = useStyle(prefixCls);
+  const wrapCSSVar = useCSSVar(prefixCls);
   const clx = classNames(
     prefixCls,
     hashId,
@@ -122,7 +124,7 @@ const Compact: React.FC<SpaceCompactProps> = (props) => {
     return null;
   }
 
-  return wrapSSR(
+  return wrapCSSVar(
     <div className={clx} {...restProps}>
       {nodes}
     </div>,

components/space/index.tsx

@@ -10,6 +10,7 @@ import { SpaceContextProvider } from './context';
 import type { SpaceContextType } from './context';
 import Item from './Item';
 import useStyle from './style';
+import useCSSVar from './style/cssVar';
 
 export { SpaceContext } from './context';
 
@@ -63,7 +64,8 @@ const Space = React.forwardRef<HTMLDivElement, SpaceProps>((props, ref) => {
 
   const mergedAlign = align === undefined && direction === 'horizontal' ? 'center' : align;
   const prefixCls = getPrefixCls('space', customizePrefixCls);
-  const [wrapSSR, hashId] = useStyle(prefixCls);
+  const [, hashId] = useStyle(prefixCls);
+  const wrapCSSVar = useCSSVar(prefixCls);
 
   const cls = classNames(
     prefixCls,
@@ -128,7 +130,7 @@ const Space = React.forwardRef<HTMLDivElement, SpaceProps>((props, ref) => {
     gapStyle.rowGap = verticalSize;
   }
 
-  return wrapSSR(
+  return wrapCSSVar(
     <div
       ref={ref}
       className={cls}

components/space/style/cssVar.ts

@@ -0,0 +1,4 @@
+import { genCSSVarRegister } from '../../theme/internal';
+import { prepareComponentToken } from '.';
+
+export default genCSSVarRegister('Space', prepareComponentToken);

components/space/style/index.ts

@@ -1,4 +1,4 @@
-import type { FullToken, GenerateStyle } from '../../theme/internal';
+import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import genSpaceCompactStyle from './compact';
 
@@ -74,6 +74,8 @@ const genSpaceGapStyle: GenerateStyle<SpaceToken> = (token) => {
 };
 
 // ============================== Export ==============================
+export const prepareComponentToken: GetDefaultToken<'Space'> = () => ({});
+
 export default genComponentStyleHook(
   'Space',
   (token) => {