Documentation

Styling

Elevate, May 20-22-2025, Miami Beach, Florida
commercetools supports both CSS Modules and CSS-in-JS with Emotion, so you can pick your preferred style choice.
If you use CSS Modules, the file should be named *.mod.css or *.module.css, so that the PostCSS loaders in Webpack can pick that up.
Suggestion: co-locate the CSS Module file next to the React component file to make it easier to relate the styles with the component (<component>.{mod,module}.css).
If you opt in using Emotion, the configuration also supports the css prop.

Use design tokens

Merchant Center applications are built with components from the commercetools design system UI Kit. The @commercetools-uikit/design-system package exposes Design Tokens that are used to style the UI components. When implementing custom styles, you should make use of the Design Tokens whenever possible.
If you use CSS Modules, the Design Tokens are already available in scope (via PostCSS) and therefore you can refer to the variables in your CSS file.
/* no import required! */
.container {
  padding: var(--spacing-l);
}
If you use CSS-in-JS, the Design Tokens can be imported from the customProperties export:
import { css } from '@emotion/react';
import { customProperties } from '@commercetools-uikit/design-system';

const styles = css`
  padding: ${customProperties.spacingL};
`;