登录页自定义

src/login/KcPage.tsx

@@ -3,7 +3,8 @@ import type { ClassKey } from "keycloakify/login";
 import type { KcContext } from "./KcContext";
 import { useI18n } from "./i18n";
 import DefaultPage from "keycloakify/login/DefaultPage";
-import Template from "keycloakify/login/Template";
+import Template from "./Template";
+import "./theme.css";
 const UserProfileFormFields = lazy(
     () => import("keycloakify/login/UserProfileFormFields")
 );
@@ -26,7 +27,7 @@ export default function KcPage(props: { kcContext: KcContext }) {
                                 i18n={i18n}
                                 classes={classes}
                                 Template={Template}
-                                doUseDefaultCss={true}
+                                doUseDefaultCss={false}
                                 UserProfileFormFields={UserProfileFormFields}
                                 doMakeUserConfirmPassword={doMakeUserConfirmPassword}
                             />
@@ -37,4 +38,41 @@ export default function KcPage(props: { kcContext: KcContext }) {
     );
 }
 
-const classes = {} satisfies { [key in ClassKey]?: string };
+const classes = {
+    kcBodyClass: "nexus-body",
+    kcLoginClass: "nexus-login",
+    kcHeaderClass: "nexus-header",
+    kcHeaderWrapperClass: "nexus-header__name",
+    kcFormCardClass: "nexus-card",
+    kcFormHeaderClass: "nexus-card__header",
+    kcFormGroupClass: "nexus-field",
+    kcLabelClass: "nexus-label",
+    kcInputClass: "nexus-input",
+    kcInputGroup: "nexus-input-group",
+    kcFormSettingClass: "nexus-form-settings",
+    kcFormOptionsWrapperClass: "nexus-form-options",
+    kcFormPasswordVisibilityButtonClass: "nexus-password-toggle",
+    kcButtonClass: "nexus-button",
+    kcButtonBlockClass: "nexus-button--block",
+    kcButtonLargeClass: "nexus-button--large",
+    kcButtonPrimaryClass: "nexus-button--primary",
+    kcButtonSecondaryClass: "nexus-button--secondary",
+    kcButtonDefaultClass: "nexus-button--default",
+    kcAlertClass: "nexus-alert",
+    kcFeedbackErrorIcon: "nexus-feedback nexus-feedback--error",
+    kcFeedbackWarningIcon: "nexus-feedback nexus-feedback--warning",
+    kcFeedbackSuccessIcon: "nexus-feedback nexus-feedback--success",
+    kcFeedbackInfoIcon: "nexus-feedback nexus-feedback--info",
+    kcFormSocialAccountSectionClass: "nexus-social",
+    kcFormSocialAccountListClass: "nexus-social__list",
+    kcFormSocialAccountListButtonClass: "nexus-social__button",
+    kcFormSocialAccountNameClass: "nexus-social__name",
+    kcSignUpClass: "nexus-signup",
+    kcInfoAreaWrapperClass: "nexus-signup__inner",
+    kcLocaleMainClass: "nexus-locale",
+    kcLocaleDropDownClass: "nexus-locale__dropdown",
+    kcLocaleListClass: "nexus-locale__list",
+    kcLocaleListItemClass: "nexus-locale__list-item",
+    kcLocaleItemClass: "nexus-locale__item",
+    kcInputErrorMessageClass: "nexus-field__error"
+} satisfies { [key in ClassKey]?: string };