Removing the default styles

Case by case

You may notice that beside the the kcSomething classes other classes are applied to the components.

The <header> element has an extra class beside kcFormHeaderClass: login-pf-header

This other classes, non prefixed with kc actually have styles rules that target them. Let's as an example remove the login-pf-header class:

src/login/KcPage.tsx

import "./main.css";
// ...

export default function KcPage(props: { kcContext: KcContext }) {
  // ...
}

const classes = {
    kcFormHeaderClass: ""
} satisfies { [key in ClassKey]?: string };

We can see that now, the <header> element only have the kcFormHeaderClass, the login-pf-header class has been removed. As a result the text is now aligned to the left (default layout)

On some components, multiples utility classes are applied, you may want to keep some of them and remove others. Example:

Here we can see that a bunch of col-* classes gets applied to the element with kcInputWrapperClass

Let's say, for example, that we would like to remove keep only the col-md and lg classes. To do that that we would write:

src/login/KcPage.tsx

import "./main.css";
// ...

export default function KcPage(props: { kcContext: KcContext }) {
  // ...
}

const classes = {
  kcInputWrapperClass: "col-md-12 col-lg-12",
} satisfies { [key in ClassKey]?: string };

Result:

Removing all the default styles at once

Maybe you'd prefer to remove all default styles at once you can do that by setting doUseDefaultCss to false.

src/login/KcPages.tsx

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

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

However be aware that re-styling everything involves quite a bit of work:

The login page with doUseDefaultCss set to false

Up next:

Applying your own classes