So far the customization we have made applies to all the pages however you might want to have stylesheet specific to certain pages.
You can do that by loading different stylesheet and applying different classes depending on the kcContext.pageId.
Implementation example, instead of importing our stylesheet at the top of the KcPage.tsx component file we import them dynamically:
src/login/KcPage.tsx
import { Suspense, lazy, useMemo} from"react";exportdefaultfunctionKcPage(props: { kcContext:KcContext }) {const { kcContext } = props;const { i18n } =useI18n({ kcContext });constclasses=useCustomStyles(kcContext);return ( <Suspense> {(() => {switch (kcContext.pageId) {default:return ( <DefaultPagekcContext={kcContext}i18n={i18n}classes={classes}Template={Template}doUseDefaultCss={true}UserProfileFormFields={UserProfileFormFields}doMakeUserConfirmPassword={doMakeUserConfirmPassword} /> ); } })()} </Suspense> );}functionuseCustomStyles(kcContext:KcContext) {returnuseMemo(() => {// You stylesheet that applies to all pages.import("./main.css");let classes: { [keyinClassKey]?:string } = {// Your classes that applies to all pages };switch (kcContext.pageId) {case"login.ftl":// You login page specific stylesheet.import("./pages/login.css"); classes = {...classes,// Your classes that applies only to the login page };break;case"register.ftl":// Your account page specific stylesheetimport("./pages/register.css"); classes = {...classes,// Your classes that applies only to the register page };break;// ... }return classes; }, []);}
What's next?
At this point of the documentation, if you're looking for using tailwind you can go to this page: