💄 style: Fix form group style

lobehub · Jan 3, 2025 · 69ec600 · 69ec600
1 parent 0b0eb7b
commit 69ec600
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git a/src/Form/components/FormGroup.tsx b/src/Form/components/FormGroup.tsx
@@ -12,7 +12,7 @@ import Icon, { type IconProps } from '@/Icon';
 export type FormVariant = 'default' | 'block' | 'ghost' | 'pure';
 export type ItemsType = 'group' | 'flat';
 
-export const useStyles = createStyles(({ css, token, responsive }) => {
+export const useStyles = createStyles(({ prefixCls, css, token, responsive }) => {
   return {
     blockStyle: css`
       background: ${token.colorFillQuaternary};
@@ -47,6 +47,13 @@ export const useStyles = createStyles(({ css, token, responsive }) => {
       padding: 16px;
       background: ${token.colorBgLayout};
     `,
+    pure: css`
+      .${prefixCls}-collapse-content-box {
+        .${prefixCls}-form-item:first-child {
+          border-block-start: 1px solid ${token.colorFillSecondary};
+        }
+      }
+    `,
     pureStyle: css`
       padding: 0;
       background: transparent;
@@ -155,7 +162,7 @@ const FormGroup = memo<FormGroupProps>(
     return (
       <Collapse
         activeKey={isUndefined(active) ? undefined : active ? [keyValue] : []}
-        className={cx(groupClassName, className)}
+        className={cx(groupClassName, variant === 'pure' && styles.pure, className)}
         collapsible={defaultCollapsible}
         defaultActiveKey={defaultActive ? [keyValue] : undefined}
         items={[

diff --git a/src/Form/style.ts b/src/Form/style.ts
@@ -58,11 +58,6 @@ export const useStyles = createStyles(({ css, token, prefixCls, responsive }) =>
   `,
   pure: css`
     gap: 64px;
-    .${prefixCls}-collapse-content-box {
-      .${prefixCls}-form-item:first-child {
-        border-block-start: 1px solid ${token.colorFillSecondary};
-      }
-    }
     ${responsive.mobile} {
       border-block-start: unset;
     }