perf(Grid): improve style performance

packages/core/client/src/schema-component/antd/grid/Grid.style.ts

@@ -7,62 +7,64 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { createStyles } from 'antd-style';
+import { genStyleHook } from '../__builtins__/style';
 
-const useStyles = createStyles(({ token, css, cx }: any) => {
+const useStyles = genStyleHook('nb-grid-in-css-in-js', (token) => {
+  const { componentCls } = token;
   // 如果相等，说明当前是在 Form 区块中，会加上 !important，否则会导致字段间距收到影响
   const important = token.marginBlock === token.marginLG ? ' !important' : '';
 
   return {
-    wrapper: css``,
+    [componentCls]: {
-    container: css`
+      position: 'relative',
-      .ColDivider {
-        flex-shrink: 0;
-        width: ${token.marginBlock}px${important};
-      }
 
-      .DraggableNode {
+      '.ColDivider': {
-        &::before {
+        flexShrink: 0,
-          content: ' ';
+        width: `${token.marginBlock}px${important}`,
-          width: 100%;
+      },
-          height: 100%;
-          position: absolute;
-          cursor: col-resize;
-        }
-        &:hover {
-          &::before {
-            background: var(--colorBgSettingsHover) !important;
-          }
-        }
-        width: ${token.marginBlock}px${important};
-        height: 100%;
-        position: absolute;
-        cursor: col-resize;
-      }
 
-      .RowDivider {
+      '.DraggableNode': {
-        height: ${token.marginBlock}px${important};
+        '&::before': {
-        width: 100%;
+          content: '" "',
-        position: absolute;
+          width: '100%',
-        margin-top: calc(-1 * ${token.marginBlock}px) ${important};
+          height: '100%',
-      }
+          position: 'absolute',
+          cursor: 'col-resize',
+        },
+        '&:hover': {
+          '&::before': {
+            background: 'var(--colorBgSettingsHover) !important',
+          },
+        },
+        width: `${token.marginBlock}px${important}`,
+        height: '100%',
+        position: 'absolute',
+        cursor: 'col-resize',
+      },
 
-      .CardRow {
+      '.RowDivider': {
-        display: flex;
+        height: `${token.marginBlock}px${important}`,
-        position: relative;
+        width: '100%',
-      }
+        position: 'absolute',
+        marginTop: `calc(-1 * ${token.marginBlock}px)${important}`,
+      },
 
-      .showDivider {
+      '.CardRow': {
-        margin: 0 calc(-1 * ${token.marginBlock}px) ${important};
+        display: 'flex',
-      }
+        position: 'relative',
+      },
 
-      .nb-grid-warp > button:last-child {
+      '.showDivider': {
-        margin-bottom: ${token.marginBlock}px;
+        margin: `0 calc(-1 * ${token.marginBlock}px)${important}`,
-      }
+      },
-      .nb-grid-warp .nb-grid-warp > button:last-child {
+
-        margin-bottom: ${token.margin}px;
+      '.nb-grid-warp > button:last-child': {
-      }
+        marginBottom: `${token.marginBlock}px`,
-    `,
+      },
+      '.nb-grid-warp .nb-grid-warp > button:last-child': {
+        marginBottom: `${token.margin}px`,
+      },
+    } as any,
   };
 });
 

packages/core/client/src/schema-component/antd/grid/Grid.tsx

@@ -332,7 +332,7 @@ export const Grid: any = observer(
     const addr = field.address.toString();
     const rows = useRowProperties();
     const { setPrintContent } = useFormBlockContext();
-    const { styles } = useStyles();
+    const { componentCls, hashId } = useStyles();
     const distributedValue =
       distributed === undefined
         ? fieldSchema?.parent['x-component'] === 'Page' || fieldSchema?.parent['x-component'] === 'Tabs.TabPane'
@@ -355,8 +355,8 @@ export const Grid: any = observer(
     return (
       <FilterBlockProvider>
         <GridContext.Provider value={gridContextValue}>
-          <div className={cls('nb-grid-container', styles.wrapper)}>
+          <div className={cls('nb-grid-container')}>
-            <div className={cls(`nb-grid ${styles.container}`)} style={{ position: 'relative' }} ref={gridRef}>
+            <div className={cls(`nb-grid ${componentCls} ${hashId}`)} ref={gridRef}>
               <div className="nb-grid-warp">
                 <DndWrapper dndContext={props.dndContext}>
                   {showDivider ? (