Styling with CSS Classes

Learn how to customize components using CSS class names and class-based styling.

c15t supports multiple syntax approaches to styling components, a simple class based approach, or an object syntax allowing you to combine class names with inline styles.

Class-Based Styling

The simplest way to style a component is by providing class names directly to theme keys:

<CookieBanner 
  theme={{
    'banner.root': 'my-banner-container',
    'banner.header.title': 'banner-title',
    'banner.header.description': 'banner-description',
    'banner.footer': 'banner-footer'
  }}
/>

Object Syntax

You can also use the object syntax with the className property:

import styles from './Banner.module.css';

<CookieBanner 
  theme={{
    'banner.root': {
      className: 'my-banner-container',
      style: {
        borderColor: dynamicBorderColor
      }
    },
    'banner.header.title': styles.title // CSS Modules work too!
  }}
/>

Tailwind CSS

c15t supports Tailwind CSS classes, however there may be some cases where you need to add the !important flag to override the default styles.

<CookieBanner 
  theme={{
    'banner.card': '!bg-red-500'
  }}
/>