Styling

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.

Using design tokens

Merchant Center applications are built with components that follow and implement commercetools Design System. 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};
`;