Case by case
You may notice that beside the the kcSomething classes other classes are applied to the components.
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 };
On some components, multiples utility classes are applied, you may want to keep some of them and remove others. Example:
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:
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.
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:
Up next:
Applying your own classes