fix: Grid flexGap lazy check (#29202)

* fix: get flex gap support before render

* chore: patch unit

* chore: rename

* test: fix test case

components/_util/__tests__/util.test.js

@@ -10,7 +10,7 @@ import {
 import getDataOrAriaProps from '../getDataOrAriaProps';
 import Wave from '../wave';
 import TransButton from '../transButton';
-import { isStyleSupport, isFlexSupported } from '../styleChecker';
+import { isStyleSupport } from '../styleChecker';
 import { sleep } from '../../../tests/utils';
 
 describe('Test utils function', () => {
@@ -208,10 +208,6 @@ describe('Test utils function', () => {
   });
 
   describe('style', () => {
-    it('isFlexSupported', () => {
-      expect(isFlexSupported).toBe(true);
-    });
-
     it('isStyleSupport', () => {
       expect(isStyleSupport('color')).toBe(true);
       expect(isStyleSupport('not-existed')).toBe(false);

components/_util/styleChecker.tsx

@@ -12,13 +12,16 @@ export const isStyleSupport = (styleName: string | Array<string>): boolean => {
   return false;
 };
 
-export const isFlexSupported = isStyleSupport(['flex', 'webkitFlex', 'Flex', 'msFlex']);
-
-export const isFlexGapSupported = (() => {
+let flexGapSupported: boolean | undefined;
+export const detectFlexGapSupported = () => {
   if (!canUseDocElement()) {
     return false;
   }
 
+  if (flexGapSupported !== undefined) {
+    return flexGapSupported;
+  }
+
   // create flex container with row-gap set
   const flex = document.createElement('div');
   flex.style.display = 'flex';
@@ -31,8 +34,8 @@ export const isFlexGapSupported = (() => {
 
   // append to the DOM (needed to obtain scrollHeight)
   document.body.appendChild(flex);
-  const isSupported = flex.scrollHeight === 1; // flex container should be 1px high from the row-gap
+  flexGapSupported = flex.scrollHeight === 1; // flex container should be 1px high from the row-gap
   document.body.removeChild(flex);
 
-  return isSupported;
-})();
+  return flexGapSupported;
+};

components/grid/__tests__/gap.test.js

@@ -7,7 +7,7 @@ import * as styleChecker from '../../_util/styleChecker';
 jest.mock('../../_util/styleChecker', () => ({
   canUseDocElement: () => true,
   isStyleSupport: () => true,
-  isFlexGapSupported: true,
+  detectFlexGapSupported: () => true,
 }));
 
 describe('Grid.Gap', () => {

components/grid/col.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import RowContext from './RowContext';
 import { ConfigContext } from '../config-provider';
-import { isFlexGapSupported } from '../_util/styleChecker';
+import { detectFlexGapSupported } from '../_util/styleChecker';
 
 // https://github.com/ant-design/ant-design/issues/14324
 type ColSpanType = number | string;
@@ -104,7 +104,7 @@ const Col = React.forwardRef<HTMLDivElement, ColProps>((props, ref) => {
   );
 
   let mergedStyle: React.CSSProperties = { ...style };
-  if (gutter && !isFlexGapSupported) {
+  if (gutter && !detectFlexGapSupported()) {
     mergedStyle = {
       ...(gutter[0]! > 0
         ? {

components/grid/row.tsx

@@ -8,7 +8,7 @@ import ResponsiveObserve, {
   ScreenMap,
   responsiveArray,
 } from '../_util/responsiveObserve';
-import { isFlexGapSupported } from '../_util/styleChecker';
+import { detectFlexGapSupported } from '../_util/styleChecker';
 
 const RowAligns = tuple('top', 'middle', 'bottom', 'stretch');
 const RowJustify = tuple('start', 'end', 'center', 'space-around', 'space-between');
@@ -100,10 +100,10 @@ const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
     '--row-gap'?: string | number;
   } = {};
 
-  if (isFlexGapSupported) {
+  if (detectFlexGapSupported()) {
     rowStyle = {
-      '--column-gap': 0,
-      '--row-gap': 0,
+      '--column-gap': '0px',
+      '--row-gap': '0px',
     };
 
     if (gutters[0]! > 0) {