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:
1import styles from '../styles/SignIn.module.css';2import { ClerkProvider, SignIn } from '@clerk/nextjs';34function MyApp({ pageProps }) {5return (6<ClerkProvider {...pageProps}>7<SignIn8appearance={{9elements: {10formButtonPrimary: styles.primaryColor11}12}}13/>14</ClerkProvider>15)16}1718export default MyApp;