Clerk logo

Clerk Docs

Ctrl + K
Go to clerk.devGet API keys

Using CSS Modules

Learn how to style Clerk components using CSS Modules

Overview

CSS Modules are CSS files in which all class names and animation names are scoped locally by default. Using CSS Modules is possible with Clerk, similarly to the CSS libraries implementation. Instead of using the Clerk-provided classes (the cl- prefixed ones), you can pass the Module class name into the elements config of the appearance prop.

Usage

Simply create your Module file and add the CSS you want to apply.

In the example below, we create a new primary color scheme:

styles/SignIn.module.css
.primaryColor {
background-color: bisque;
color: black;
}

Then you can apply this by importing the file and using the classes whenever required:

1
import styles from '../styles/SignIn.module.css';
2
import { ClerkProvider, SignIn } from '@clerk/nextjs';
3
4
function MyApp({ pageProps }) {
5
return (
6
<ClerkProvider {...pageProps}>
7
<SignIn
8
appearance={{
9
elements: {
10
formButtonPrimary: styles.primaryColor
11
}
12
}}
13
/>
14
</ClerkProvider>
15
)
16
}
17
18
export default MyApp;

Was this helpful?

Clerk © 2022