# 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:

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: {% code title="src/login/KcPage.tsx" %} ```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 }; ``` {% endcode %} 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.

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: {% content-ref url="/pages/kuOou9dFygdKsoap3sZi" %} [Applying your own classes](/documentation/v10/customization-strategies/css-level-customization/applying-your-own-classes.md) {% endcontent-ref %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://doc-old.keycloakify.dev/documentation/v10/customization-strategies/css-level-customization/removing-the-default-styles.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.