diff --git a/components/masonry/Masonry.tsx b/components/masonry/Masonry.tsx
index fb684a7286..0257fe1318 100644
--- a/components/masonry/Masonry.tsx
+++ b/components/masonry/Masonry.tsx
@@ -16,6 +16,7 @@ import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 import type { RowProps } from '../grid';
 import useBreakpoint from '../grid/hooks/useBreakpoint';
 import useGutter from '../grid/hooks/useGutter';
+import { genCssVar } from '../theme/util/genStyleUtils';
 import useDelay from './hooks/useDelay';
 import usePositions from './hooks/usePositions';
 import type { ItemHeightData } from './hooks/usePositions';
@@ -92,9 +93,12 @@ const Masonry = React.forwardRef<MasonryRef, MasonryProps>((props, ref) => {
   } = useComponentConfig('masonry');
 
   const prefixCls = getPrefixCls('masonry', customizePrefixCls);
+  const rootPrefixCls = getPrefixCls();
   const rootCls = useCSSVarCls(prefixCls);
   const [hashId, cssVarCls] = useStyle(prefixCls, rootCls);
 
+  const [varName, varRef] = genCssVar(rootPrefixCls, 'masonry');
+
   // ======================= Refs =======================
   const containerRef = React.useRef<HTMLDivElement>(null);
 
@@ -231,12 +235,7 @@ const Masonry = React.forwardRef<MasonryRef, MasonryProps>((props, ref) => {
           cssVarCls,
           { [`${prefixCls}-rtl`]: direction === 'rtl' },
         )}
-        style={{
-          height: totalHeight,
-          ...mergedStyles.root,
-          ...contextStyle,
-          ...style,
-        }}
+        style={{ height: totalHeight, ...mergedStyles.root, ...contextStyle, ...style }}
         // Listen for image events
         onLoad={collectItemSize}
         onError={collectItemSize}
@@ -263,9 +262,9 @@ const Masonry = React.forwardRef<MasonryRef, MasonryProps>((props, ref) => {
             const { column: columnIndex = 0 } = position;
 
             const itemStyle: CSSProperties = {
-              '--item-width': `calc((100% + ${horizontalGutter}px) / ${columnCount})`,
-              insetInlineStart: `calc(var(--item-width) * ${columnIndex})`,
-              width: `calc(var(--item-width) - ${horizontalGutter}px)`,
+              [varName('item-width')]: `calc((100% + ${horizontalGutter}px) / ${columnCount})`,
+              insetInlineStart: `calc(${varRef('item-width')} * ${columnIndex})`,
+              width: `calc(${varRef('item-width')} - ${horizontalGutter}px)`,
               top: position.top,
               position: 'absolute',
             };
diff --git a/components/masonry/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/masonry/__tests__/__snapshots__/demo-extend.test.ts.snap
index aefd45412a..dfe079ddf3 100644
--- a/components/masonry/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/masonry/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -7,7 +7,7 @@ exports[`renders components/masonry/demo/basic.tsx extend context correctly 1`]
 >
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
   >
     <div
       class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -22,7 +22,7 @@ exports[`renders components/masonry/demo/basic.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
   >
     <div
       class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -37,7 +37,7 @@ exports[`renders components/masonry/demo/basic.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
   >
     <div
       class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -52,7 +52,7 @@ exports[`renders components/masonry/demo/basic.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
   >
     <div
       class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -67,7 +67,7 @@ exports[`renders components/masonry/demo/basic.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
   >
     <div
       class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -106,7 +106,7 @@ exports[`renders components/masonry/demo/basic.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
   >
     <div
       class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -121,7 +121,7 @@ exports[`renders components/masonry/demo/basic.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
   >
     <div
       class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -136,7 +136,7 @@ exports[`renders components/masonry/demo/basic.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
   >
     <div
       class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -151,7 +151,7 @@ exports[`renders components/masonry/demo/basic.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
   >
     <div
       class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -166,7 +166,7 @@ exports[`renders components/masonry/demo/basic.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
   >
     <div
       class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -181,7 +181,7 @@ exports[`renders components/masonry/demo/basic.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
   >
     <div
       class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -196,7 +196,7 @@ exports[`renders components/masonry/demo/basic.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
   >
     <div
       class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -211,7 +211,7 @@ exports[`renders components/masonry/demo/basic.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
   >
     <div
       class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -226,7 +226,7 @@ exports[`renders components/masonry/demo/basic.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
   >
     <div
       class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -241,7 +241,7 @@ exports[`renders components/masonry/demo/basic.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
   >
     <div
       class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -266,7 +266,7 @@ exports[`renders components/masonry/demo/fresh.tsx extend context correctly 1`]
 >
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
   >
     <div
       class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -281,7 +281,7 @@ exports[`renders components/masonry/demo/fresh.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
   >
     <div
       class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -296,7 +296,7 @@ exports[`renders components/masonry/demo/fresh.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
   >
     <div
       class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -311,7 +311,7 @@ exports[`renders components/masonry/demo/fresh.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
   >
     <div
       class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -326,7 +326,7 @@ exports[`renders components/masonry/demo/fresh.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
   >
     <div
       class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -341,7 +341,7 @@ exports[`renders components/masonry/demo/fresh.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
   >
     <div
       class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -356,7 +356,7 @@ exports[`renders components/masonry/demo/fresh.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
   >
     <div
       class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -371,7 +371,7 @@ exports[`renders components/masonry/demo/fresh.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
   >
     <div
       class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -386,7 +386,7 @@ exports[`renders components/masonry/demo/fresh.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
   >
     <div
       class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -401,7 +401,7 @@ exports[`renders components/masonry/demo/fresh.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
   >
     <div
       class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -416,7 +416,7 @@ exports[`renders components/masonry/demo/fresh.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
   >
     <div
       class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -431,7 +431,7 @@ exports[`renders components/masonry/demo/fresh.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
   >
     <div
       class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -446,7 +446,7 @@ exports[`renders components/masonry/demo/fresh.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
   >
     <div
       class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -461,7 +461,7 @@ exports[`renders components/masonry/demo/fresh.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
   >
     <div
       class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -476,7 +476,7 @@ exports[`renders components/masonry/demo/fresh.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
   >
     <div
       class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -501,7 +501,7 @@ exports[`renders components/masonry/demo/image.tsx extend context correctly 1`]
 >
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
   >
     <img
       alt="sample"
@@ -511,7 +511,7 @@ exports[`renders components/masonry/demo/image.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
   >
     <img
       alt="sample"
@@ -521,7 +521,7 @@ exports[`renders components/masonry/demo/image.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
   >
     <img
       alt="sample"
@@ -531,7 +531,7 @@ exports[`renders components/masonry/demo/image.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
   >
     <img
       alt="sample"
@@ -541,7 +541,7 @@ exports[`renders components/masonry/demo/image.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
   >
     <img
       alt="sample"
@@ -551,7 +551,7 @@ exports[`renders components/masonry/demo/image.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
   >
     <img
       alt="sample"
@@ -561,7 +561,7 @@ exports[`renders components/masonry/demo/image.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
   >
     <img
       alt="sample"
@@ -571,7 +571,7 @@ exports[`renders components/masonry/demo/image.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
   >
     <img
       alt="sample"
@@ -581,7 +581,7 @@ exports[`renders components/masonry/demo/image.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
   >
     <img
       alt="sample"
@@ -591,7 +591,7 @@ exports[`renders components/masonry/demo/image.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
   >
     <img
       alt="sample"
@@ -601,7 +601,7 @@ exports[`renders components/masonry/demo/image.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
   >
     <img
       alt="sample"
@@ -611,7 +611,7 @@ exports[`renders components/masonry/demo/image.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
   >
     <img
       alt="sample"
@@ -621,7 +621,7 @@ exports[`renders components/masonry/demo/image.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
   >
     <img
       alt="sample"
@@ -631,7 +631,7 @@ exports[`renders components/masonry/demo/image.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
   >
     <img
       alt="sample"
@@ -641,7 +641,7 @@ exports[`renders components/masonry/demo/image.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
   >
     <img
       alt="sample"
@@ -651,7 +651,7 @@ exports[`renders components/masonry/demo/image.tsx extend context correctly 1`]
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
   >
     <img
       alt="sample"
@@ -671,7 +671,7 @@ exports[`renders components/masonry/demo/responsive.tsx extend context correctly
 >
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 8px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 8px); position: absolute;"
   >
     <div
       class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -686,7 +686,7 @@ exports[`renders components/masonry/demo/responsive.tsx extend context correctly
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 8px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 8px); position: absolute;"
   >
     <div
       class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -701,7 +701,7 @@ exports[`renders components/masonry/demo/responsive.tsx extend context correctly
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 8px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 8px); position: absolute;"
   >
     <div
       class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -716,7 +716,7 @@ exports[`renders components/masonry/demo/responsive.tsx extend context correctly
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 8px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 8px); position: absolute;"
   >
     <div
       class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -731,7 +731,7 @@ exports[`renders components/masonry/demo/responsive.tsx extend context correctly
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 8px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 8px); position: absolute;"
   >
     <div
       class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -746,7 +746,7 @@ exports[`renders components/masonry/demo/responsive.tsx extend context correctly
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 8px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 8px); position: absolute;"
   >
     <div
       class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -761,7 +761,7 @@ exports[`renders components/masonry/demo/responsive.tsx extend context correctly
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 8px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 8px); position: absolute;"
   >
     <div
       class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -776,7 +776,7 @@ exports[`renders components/masonry/demo/responsive.tsx extend context correctly
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 8px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 8px); position: absolute;"
   >
     <div
       class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -791,7 +791,7 @@ exports[`renders components/masonry/demo/responsive.tsx extend context correctly
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 8px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 8px); position: absolute;"
   >
     <div
       class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -806,7 +806,7 @@ exports[`renders components/masonry/demo/responsive.tsx extend context correctly
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 8px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 8px); position: absolute;"
   >
     <div
       class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -821,7 +821,7 @@ exports[`renders components/masonry/demo/responsive.tsx extend context correctly
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 8px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 8px); position: absolute;"
   >
     <div
       class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -836,7 +836,7 @@ exports[`renders components/masonry/demo/responsive.tsx extend context correctly
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 8px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 8px); position: absolute;"
   >
     <div
       class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -851,7 +851,7 @@ exports[`renders components/masonry/demo/responsive.tsx extend context correctly
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 8px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 8px); position: absolute;"
   >
     <div
       class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -866,7 +866,7 @@ exports[`renders components/masonry/demo/responsive.tsx extend context correctly
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 8px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 8px); position: absolute;"
   >
     <div
       class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -881,7 +881,7 @@ exports[`renders components/masonry/demo/responsive.tsx extend context correctly
   </div>
   <div
     class="ant-masonry-item ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-    style="--item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 8px); position: absolute;"
+    style="--ant-masonry-item-width: calc((100% + 8px) / 1); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 8px); position: absolute;"
   >
     <div
       class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -916,7 +916,7 @@ exports[`renders components/masonry/demo/style-class.tsx extend context correctl
     >
       <div
         class="ant-masonry-item acss-3iocwh ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-        style="transform: scale(0.98); transition: transform 0.2s ease; border: 1px solid rgb(204, 204, 204); --item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
+        style="transform: scale(0.98); transition: transform 0.2s ease; border: 1px solid rgb(204, 204, 204); --ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
       >
         <div
           class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -931,7 +931,7 @@ exports[`renders components/masonry/demo/style-class.tsx extend context correctl
       </div>
       <div
         class="ant-masonry-item acss-3iocwh ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-        style="transform: scale(0.98); transition: transform 0.2s ease; border: 1px solid rgb(204, 204, 204); --item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
+        style="transform: scale(0.98); transition: transform 0.2s ease; border: 1px solid rgb(204, 204, 204); --ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
       >
         <div
           class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -946,7 +946,7 @@ exports[`renders components/masonry/demo/style-class.tsx extend context correctl
       </div>
       <div
         class="ant-masonry-item acss-3iocwh ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-        style="transform: scale(0.98); transition: transform 0.2s ease; border: 1px solid rgb(204, 204, 204); --item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
+        style="transform: scale(0.98); transition: transform 0.2s ease; border: 1px solid rgb(204, 204, 204); --ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
       >
         <div
           class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -961,7 +961,7 @@ exports[`renders components/masonry/demo/style-class.tsx extend context correctl
       </div>
       <div
         class="ant-masonry-item acss-3iocwh ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-        style="transform: scale(0.98); transition: transform 0.2s ease; border: 1px solid rgb(204, 204, 204); --item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
+        style="transform: scale(0.98); transition: transform 0.2s ease; border: 1px solid rgb(204, 204, 204); --ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
       >
         <div
           class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -976,7 +976,7 @@ exports[`renders components/masonry/demo/style-class.tsx extend context correctl
       </div>
       <div
         class="ant-masonry-item acss-3iocwh ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-        style="transform: scale(0.98); transition: transform 0.2s ease; border: 1px solid rgb(204, 204, 204); --item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
+        style="transform: scale(0.98); transition: transform 0.2s ease; border: 1px solid rgb(204, 204, 204); --ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
       >
         <div
           class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -991,7 +991,7 @@ exports[`renders components/masonry/demo/style-class.tsx extend context correctl
       </div>
       <div
         class="ant-masonry-item acss-3iocwh ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-        style="transform: scale(0.98); transition: transform 0.2s ease; border: 1px solid rgb(204, 204, 204); --item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
+        style="transform: scale(0.98); transition: transform 0.2s ease; border: 1px solid rgb(204, 204, 204); --ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
       >
         <div
           class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -1006,7 +1006,7 @@ exports[`renders components/masonry/demo/style-class.tsx extend context correctl
       </div>
       <div
         class="ant-masonry-item acss-3iocwh ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-        style="transform: scale(0.98); transition: transform 0.2s ease; border: 1px solid rgb(204, 204, 204); --item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
+        style="transform: scale(0.98); transition: transform 0.2s ease; border: 1px solid rgb(204, 204, 204); --ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
       >
         <div
           class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -1021,7 +1021,7 @@ exports[`renders components/masonry/demo/style-class.tsx extend context correctl
       </div>
       <div
         class="ant-masonry-item acss-3iocwh ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-        style="transform: scale(0.98); transition: transform 0.2s ease; border: 1px solid rgb(204, 204, 204); --item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 16px); position: absolute;"
+        style="transform: scale(0.98); transition: transform 0.2s ease; border: 1px solid rgb(204, 204, 204); --ant-masonry-item-width: calc((100% + 16px) / 4); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 16px); position: absolute;"
       >
         <div
           class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -1052,7 +1052,7 @@ exports[`renders components/masonry/demo/style-class.tsx extend context correctl
     >
       <div
         class="ant-masonry-item acss-3iocwh ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-        style="box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: 1px solid rgb(24, 144, 255); --item-width: calc((100% + 12px) / 3); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 12px); position: absolute;"
+        style="box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: 1px solid rgb(24, 144, 255); --ant-masonry-item-width: calc((100% + 12px) / 3); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 12px); position: absolute;"
       >
         <div
           class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -1067,7 +1067,7 @@ exports[`renders components/masonry/demo/style-class.tsx extend context correctl
       </div>
       <div
         class="ant-masonry-item acss-3iocwh ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-        style="box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: 1px solid rgb(24, 144, 255); --item-width: calc((100% + 12px) / 3); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 12px); position: absolute;"
+        style="box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: 1px solid rgb(24, 144, 255); --ant-masonry-item-width: calc((100% + 12px) / 3); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 12px); position: absolute;"
       >
         <div
           class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -1082,7 +1082,7 @@ exports[`renders components/masonry/demo/style-class.tsx extend context correctl
       </div>
       <div
         class="ant-masonry-item acss-3iocwh ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-        style="box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: 1px solid rgb(24, 144, 255); --item-width: calc((100% + 12px) / 3); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 12px); position: absolute;"
+        style="box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: 1px solid rgb(24, 144, 255); --ant-masonry-item-width: calc((100% + 12px) / 3); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 12px); position: absolute;"
       >
         <div
           class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -1097,7 +1097,7 @@ exports[`renders components/masonry/demo/style-class.tsx extend context correctl
       </div>
       <div
         class="ant-masonry-item acss-3iocwh ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-        style="box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: 1px solid rgb(24, 144, 255); --item-width: calc((100% + 12px) / 3); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 12px); position: absolute;"
+        style="box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: 1px solid rgb(24, 144, 255); --ant-masonry-item-width: calc((100% + 12px) / 3); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 12px); position: absolute;"
       >
         <div
           class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -1112,7 +1112,7 @@ exports[`renders components/masonry/demo/style-class.tsx extend context correctl
       </div>
       <div
         class="ant-masonry-item acss-3iocwh ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-        style="box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: 1px solid rgb(24, 144, 255); --item-width: calc((100% + 12px) / 3); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 12px); position: absolute;"
+        style="box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: 1px solid rgb(24, 144, 255); --ant-masonry-item-width: calc((100% + 12px) / 3); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 12px); position: absolute;"
       >
         <div
           class="ant-card ant-card-bordered ant-card-small css-var-test-id"
@@ -1127,7 +1127,7 @@ exports[`renders components/masonry/demo/style-class.tsx extend context correctl
       </div>
       <div
         class="ant-masonry-item acss-3iocwh ant-masonry-item-fade-appear ant-masonry-item-fade-appear-start ant-masonry-item-fade"
-        style="box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: 1px solid rgb(24, 144, 255); --item-width: calc((100% + 12px) / 3); inset-inline-start: calc(var(--item-width) * 0); width: calc(var(--item-width) - 12px); position: absolute;"
+        style="box-shadow: 0 2px 8px rgba(0,0,0,0.1); border: 1px solid rgb(24, 144, 255); --ant-masonry-item-width: calc((100% + 12px) / 3); inset-inline-start: calc(var(--ant-masonry-item-width) * 0); width: calc(var(--ant-masonry-item-width) - 12px); position: absolute;"
       >
         <div
           class="ant-card ant-card-bordered ant-card-small css-var-test-id"
diff --git a/components/masonry/__tests__/index.test.tsx b/components/masonry/__tests__/index.test.tsx
index e3756fa7b4..5e5cc978e4 100644
--- a/components/masonry/__tests__/index.test.tsx
+++ b/components/masonry/__tests__/index.test.tsx
@@ -4,6 +4,8 @@ import { spyElementPrototypes } from '@rc-component/util/lib/test/domHook';
 import Masonry from '..';
 import type { MasonryProps } from '..';
 import { render, triggerResize, waitFakeTimer } from '../../../tests/utils';
+import { defaultPrefixCls } from '../../config-provider';
+import { genCssVar } from '../../theme/util/genStyleUtils';
 
 const resizeMasonry = async () => {
   triggerResize(document.body.querySelector('.ant-masonry')!);
@@ -198,15 +200,14 @@ describe('Masonry', () => {
   });
 
   describe('gutter', () => {
+    const [varName] = genCssVar(defaultPrefixCls, 'masonry');
     const getGutter = () => {
       const itemElements = document.body.querySelectorAll<HTMLElement>('.ant-masonry-item');
-
       const horizontalGutter = itemElements[0].style
-        .getPropertyValue('--item-width')
-        .match(/\d+px/)![0];
-      const verticalGutter = itemElements[2].style.top.match(/\d+px/)![0];
-
-      return [Number.parseInt(horizontalGutter, 10), Number.parseInt(verticalGutter, 10)];
+        .getPropertyValue(varName('item-width'))
+        .match(/\d+px/)?.[0];
+      const verticalGutter = itemElements[2].style.top.match(/\d+px/)?.[0];
+      return [Number.parseInt(horizontalGutter!, 10), Number.parseInt(verticalGutter!, 10)];
     };
 
     const renderGutter = (gutter: MasonryProps['gutter']) => (