fix(form): fix loginPage style error

ant-design · Oct 11, 2023 · 80ace22 · 80ace22
1 parent 8a61322
commit 80ace22
Show file tree

Hide file tree

Showing 3 changed files with 403 additions and 393 deletions.
diff --git a/packages/form/src/layouts/LoginFormPage/index.tsx b/packages/form/src/layouts/LoginFormPage/index.tsx
@@ -166,56 +166,60 @@ export function LoginFormPage<T = Record<string, any>>(
           />
         </div>
       ) : null}
-      <div className={getCls('notice')}>
-        {activityConfig && (
-          <div
-            className={getCls('notice-activity')}
-            style={activityConfig.style}
-          >
-            {activityConfig.title && (
-              <div className={getCls('notice-activity-title')}>
-                {' '}
-                {activityConfig.title}{' '}
-              </div>
-            )}
-            {activityConfig.subTitle && (
-              <div className={getCls('notice-activity-subTitle')}>
-                {activityConfig.subTitle}
-              </div>
-            )}
-            {activityConfig.action && (
-              <div className={getCls('notice-activity-action')}>
-                {activityConfig.action}
-              </div>
-            )}
-          </div>
-        )}
-      </div>
-      <div className={getCls('left')}>
-        <div className={getCls('container')} style={containerStyle}>
-          <div className={getCls('top')}>
-            {title || logoDom ? (
-              <div className={getCls('header')}>
-                {logoDom ? (
-                  <span className={getCls('logo')}>{logoDom}</span>
-                ) : null}
-                {title ? (
-                  <span className={getCls('title')}>{title}</span>
-                ) : null}
-              </div>
-            ) : null}
-            {subTitle ? <div className={getCls('desc')}>{subTitle}</div> : null}
-          </div>
-          <div className={getCls('main')} style={mainStyle}>
-            <ProForm isKeyPressSubmit {...proFormProps} submitter={submitter}>
-              {message}
-              {children}
-            </ProForm>
-            {actions ? (
-              <div className={getCls('other')} style={otherStyle}>
-                {actions}
-              </div>
-            ) : null}
+      <div className={classNames(baseClassName, hashId)}>
+        <div className={getCls('notice')}>
+          {activityConfig && (
+            <div
+              className={getCls('notice-activity')}
+              style={activityConfig.style}
+            >
+              {activityConfig.title && (
+                <div className={getCls('notice-activity-title')}>
+                  {' '}
+                  {activityConfig.title}{' '}
+                </div>
+              )}
+              {activityConfig.subTitle && (
+                <div className={getCls('notice-activity-subTitle')}>
+                  {activityConfig.subTitle}
+                </div>
+              )}
+              {activityConfig.action && (
+                <div className={getCls('notice-activity-action')}>
+                  {activityConfig.action}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+        <div className={getCls('left')}>
+          <div className={getCls('container')} style={containerStyle}>
+            <div className={getCls('top')}>
+              {title || logoDom ? (
+                <div className={getCls('header')}>
+                  {logoDom ? (
+                    <span className={getCls('logo')}>{logoDom}</span>
+                  ) : null}
+                  {title ? (
+                    <span className={getCls('title')}>{title}</span>
+                  ) : null}
+                </div>
+              ) : null}
+              {subTitle ? (
+                <div className={getCls('desc')}>{subTitle}</div>
+              ) : null}
+            </div>
+            <div className={getCls('main')} style={mainStyle}>
+              <ProForm isKeyPressSubmit {...proFormProps} submitter={submitter}>
+                {message}
+                {children}
+              </ProForm>
+              {actions ? (
+                <div className={getCls('other')} style={otherStyle}>
+                  {actions}
+                </div>
+              ) : null}
+            </div>
           </div>
         </div>
       </div>

diff --git a/packages/form/src/layouts/LoginFormPage/style.ts b/packages/form/src/layouts/LoginFormPage/style.ts
@@ -45,6 +45,8 @@ const genLoginFormStyle: GenerateStyle<LoginFormToken> = (token) => {
         alignItems: 'center',
         justifyContent: 'center',
         padding: 24,
+        height: 'max-content',
+        margin: 'auto',
       },
       '&-container': {
         borderRadius: token.borderRadius,