feat(form): support more style config

ant-design · Sep 26, 2023 · b8c3954 · b8c3954
1 parent 249391c
commit b8c3954
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 8 deletions.
diff --git a/packages/form/src/layouts/LoginForm/index.tsx b/packages/form/src/layouts/LoginForm/index.tsx
@@ -47,6 +47,11 @@ export type LoginFormProps<T> = {
    * @name 登录框主表格的样式
    */
   contentStyle?: React.CSSProperties;
+  /**
+   * @name 登录框容器的样式
+   */
+  containerStyle?: React.CSSProperties;
+  otherStyle?: React.CSSProperties;
 } & Omit<ProFormProps<T>, 'title'>;
 
 function LoginForm<T = Record<string, any>>(props: Partial<LoginFormProps<T>>) {
@@ -58,6 +63,8 @@ function LoginForm<T = Record<string, any>>(props: Partial<LoginFormProps<T>>) {
     subTitle,
     actions,
     children,
+    containerStyle,
+    otherStyle,
     ...proFormProps
   } = props;
 
@@ -110,7 +117,10 @@ function LoginForm<T = Record<string, any>>(props: Partial<LoginFormProps<T>>) {
   }, [logo]);
 
   return wrapSSR(
-    <div className={classNames(getCls('container'), hashId)}>
+    <div
+      className={classNames(getCls('container'), hashId)}
+      style={containerStyle}
+    >
       <div className={`${getCls('top')} ${hashId}`.trim()}>
         {title || logoDom ? (
           <div className={`${getCls('header')}`}>
@@ -131,7 +141,11 @@ function LoginForm<T = Record<string, any>>(props: Partial<LoginFormProps<T>>) {
           {message}
           {children}
         </ProForm>
-        {actions ? <div className={getCls('main-other')}>{actions}</div> : null}
+        {actions ? (
+          <div className={getCls('main-other')} style={otherStyle}>
+            {actions}
+          </div>
+        ) : null}
       </div>
     </div>,
   );

diff --git a/packages/form/src/layouts/LoginFormPage/index.tsx b/packages/form/src/layouts/LoginFormPage/index.tsx
@@ -60,6 +60,8 @@ export type LoginFormPageProps<T> = {
   children?: React.ReactNode | React.ReactNode[];
 
   containerStyle?: React.CSSProperties;
+  mainStyle?: React.CSSProperties;
+  otherStyle?: React.CSSProperties;
 } & ProFormProps<T>;
 
 export function LoginFormPage<T = Record<string, any>>(
@@ -76,6 +78,8 @@ export function LoginFormPage<T = Record<string, any>>(
     actions,
     children,
     containerStyle,
+    otherStyle,
+    mainStyle,
     ...proFormProps
   } = props;
 
@@ -140,14 +144,12 @@ export function LoginFormPage<T = Record<string, any>>(
             )}
             {activityConfig.subTitle && (
               <div className={getCls('notice-activity-subTitle')}>
-                {' '}
-                {activityConfig.subTitle}{' '}
+                {activityConfig.subTitle}
               </div>
             )}
             {activityConfig.action && (
               <div className={getCls('notice-activity-action')}>
-                {' '}
-                {activityConfig.action}{' '}
+                {activityConfig.action}
               </div>
             )}
           </div>
@@ -168,12 +170,16 @@ export function LoginFormPage<T = Record<string, any>>(
             ) : null}
             {subTitle ? <div className={getCls('desc')}>{subTitle}</div> : null}
           </div>
-          <div className={getCls('main')}>
+          <div className={getCls('main')} style={mainStyle}>
             <ProForm isKeyPressSubmit {...proFormProps} submitter={submitter}>
               {message}
               {children}
             </ProForm>
-            {actions ? <div className={getCls('other')}>{actions}</div> : null}
+            {actions ? (
+              <div className={getCls('other')} style={otherStyle}>
+                {actions}
+              </div>
+            ) : null}
           </div>
         </div>
       </div>