This feature is only available for stores using B2B Buyer Portal, which is currently available to selected accounts.

Once you have created a Checkout extension, you can style your components using CSS. Checkout supports two approaches:

• CSS Modules: Access classes through the object automatically generated by the bundler, scoping class names locally to the component. This is the recommended approach.
• Plain CSS imports: Use import to apply classes globally (for example, className='btn').

This configuration is optional.

CSS files have access to the global scope where they are loaded, meaning they can technically target and style other elements of the Checkout core. Using CSS exclusively to style your extensions is recommended.

Any styling applied to core elements is subject to breaking changes due to bug fixes, new features, and other updates.

Avoid using global CSS to target elements outside your extension, such as with tag, class, or id selectors, for the following reasons:

• Future releases may include sandboxing mechanisms that isolate CSS and/or extensions from the core application's global scope (for example, the DOM).
• Using selectors like classes or IDs on core Checkout elements (for example, the "Proceed to Checkout" button, the cart list, the header, or the logo) is not supported, as Checkout generates unique IDs for classes applied to its elements.
• Relying on the markup to create selectors with the goal of customizing the core Checkout is risky, as the markup may change with core updates (for example, adding or removing elements in the DOM).

Visual changes, such as the primary brand color, are currently done through configuration. Other visual customizations, such as fonts and borders, will be possible in future releases.

Using CSS Modules is the recommended approach.

CSS Modules ensure that class names are scoped locally to the component, avoiding potential conflicts with other styles in the global namespace. Classes are imported as an object and applied to your components dynamically, ensuring a clean separation of styles.

Here's a sample component using a CSS Module for styling:

This is the accompanying CSS module file:

When using CSS Modules, the bundler automatically creates unique class names, so there is no need to worry about class name collisions.

When using imports, you include .css files in the relevant .tsx file. You can either create a single file and import it once in src/index.tsx, or create component-specific files and import them in each component's file.

Example with a single CSS file:

Examples with multiple CSS files:

Checkout generates classes with unique IDs, so there is no conflict with the core, but globally scoped CSS class names might conflict with other extensions you are styling.

Checkout provides CSS variables that you can use to style your extensions consistently with the store's theme, such as --fc-colors-brand-primary. For an example of CSS variables in use, see the Punchout cart integration guide.