Using Inline CSS Objects

Learn how to style Clerk components using inline CSS objects

Overview

If you prefer not to use a stylesheet or a CSS framework like Tailwind or Bootstrap, Clerk provides the ability to customize Clerk components using inline styles in the elements config of the appearance prop. Inline styles allow you to pass JavaScript objects with the CSS declarations as pairs of camelCased property keys and their values, usually strings unless they are numeric.

Usage

To use inline styles with Clerk components, you first need to identify the elements you'd like to style.

Open the development tools inspector and find the element inside the Clerk components you want to apply styles to. For example, the primary button on the Sign In form:

The element will have classes applied to it like:

cl-formButtonPrimary cl-button 🔒️ cl-internal-1ta0xpz

The classes to the right of the lock icon (🔒) are used internally and can be safely ignored. The main class to focus on for styling is cl-formButtonPrimary. Remove the cl- prefix and add the element property as a key in your elements config. The value will be an object containing your style properties.

import { SignIn } from '@clerk/nextjs';

const SignInPage = () => (
  <SignIn
    appearance={{
      elements: {
        formButtonPrimary: {
          fontSize: 14,
          textTransform: 'none',
          backgroundColor: '#611BBD',
          '&:hover, &:focus, &:active': {
            backgroundColor: '#49247A'
          }
        }
      }
    }}
  />
);

export default SignInPage;

This will change the styles of the primary button accordingly.

Note the use of the & to reference the current element selector to apply styles to the pseudo-classes :hover, :focus, and :active.