Page specific styles

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";

export default function KcPage(props: { kcContext: KcContext }) {
    const { kcContext } = props;

    const { i18n } = useI18n({ kcContext });

    const classes = useCustomStyles(kcContext);

    return (
        <Suspense>
            {(() => {
                switch (kcContext.pageId) {
                    default:
                        return (
                            <DefaultPage
                                kcContext={kcContext}
                                i18n={i18n}
                                classes={classes}
                                Template={Template}
                                doUseDefaultCss={true}
                                UserProfileFormFields={UserProfileFormFields}
                                doMakeUserConfirmPassword={doMakeUserConfirmPassword}
                            />
                        );
                }
            })()}
        </Suspense>
    );
}

function useCustomStyles(kcContext: KcContext) {
    return useMemo(() => {
        
        // You stylesheet that applies to all pages.
        import("./main.css");
        let classes: { [key in ClassKey]?: 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 stylesheet
                import("./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:

Using Tailwind

Else you can skip directly to the next section:

Using custom assets