Page specific styles

React

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;

    }, []);
}

Angular

In Angular you can use page specific CSS as usual. Just add the CSS file to the component folder and add it to the stlyes array in your component.

login/
├── login.component.ts
├── login.component.html
└── login.component.css

src/login/pages/login/login.component.ts

@Component({
    selector: 'kc-login',
    templateUrl: 'login.component.html',
    styleUrls: ['login.component.css'],
    standalone: true,
    changeDetection: ChangeDetectionStrategy.OnPush,
    imports: [KcClassDirective, AsyncPipe, KcSanitizePipe, PasswordWrapperComponent, NgClass, CommonModule],
    providers: [
        {
            provide: ComponentReference,
            useExisting: forwardRef(() => LoginComponent)
        }
    ]
})

Also to overwrite classes per page you can define extra classes in the component.

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