Styling your site

You use React to build your site. So, you can add CSS classes to any React Component using the className prop:

function Menu() {
return <div className="menu navigation-menu">Menu</div>;
}
Clipboard icon

We don't recommend applying inline styles directly using JavaScript objects because the performance of CSS classes is generally better than inline styles. Still, you can use it if you want to.

function Menu() {
return <div style={{color: red;}}>Menu!</div>
}
Clipboard icon

Global CSS

Since commercetools Frontend is based on Next.js, you can import CSS files directly from a JavaScript file. To make your CSS classes globally available in your site, you have to import it within pages/_app.ts:

import './app.css';
function FrontasticStarter({ Component, pageProps }) {
return (
<FrontasticProvider>
<Component {...pageProps} />
</FrontasticProvider>
);
}
export default appWithTranslation(FrontasticStarter);
Clipboard icon

You can also import stylesheets on the component level. Still, due to the global nature of CSS, we recommend against it and instead use CSS Modules or something similar to properly scope your CSS (see below).

Multiple CSS files are merged and minified into a single .css file in production.

Styles from node_modules

You can also import CSS files directly from thenode_modulesfolder. The import path starts with the package name (for example,bootstrap\) and then the file's location inside that package.

import 'bootstrap/dist/css/bootstrap.css';
Clipboard icon

For global CSS like bootstrap you should import those styles inside pages/_app.ts. For component-level CSS, you can import it inside a component directly:

import { Dialog } from '@reach/dialog';
import VisuallyHidden from '@reach/visually-hidden';
import '@reach/dialog/styles.css';
Clipboard icon

CSS Modules

CSS Modules locally scope CSS by automatically creating unique class names, making it ideal to use on the component level.

To use CSS Modules, a CSS file needs to have the .module.css extension.

Classes from CSS Modules are imported and accessible as a regular JS Object. For example:

.heading {
color: yellow;
background-color: blue;
margin: 0 0 1rem;
}
.titleHighlighted {
padding: 1rem 2rem;
text-align: center;
}
Clipboard icon

And then inside your component:

import React, { Component } from 'react';
import myStyles from './styles.css';
function Subtitle() {
return (
<div>
<h2 className={myStyles.heading}>My Title</h2>
<h2 className={myStyles.titleHighlighted}>My Title</h2>
</div>
);
}
export default Subtitle;
Clipboard icon

Sass

commercetools Frontend allows you to import Sass using both the .scss and .sass extensions. You can use component-level Sass via CSS Modules and the .module.scss or .module.sass extension.

You need to install SassExternal link icon before you can use it:

yarn add sass
Clipboard icon
Information icon

Sass supports 2 different syntaxesExternal link icon, each with their own extension. The .scss extension requires you use the SCSS syntaxExternal link icon, while the .sass extension requires you use the Indented Syntax (Sass)External link icon.\n\nIf you're unsure which to choose, start with the .scss extension, which is a superset of CSS and doesn't require you to learn the Indented Syntax (Sass).

styled-jsx/CSS-in-JS

CSS-in-JS refers to a pattern where CSS is composed using JavaScript instead of defined in external files.

styled-jsxExternal link icon is 1 CSS-in-JS approach that you can use directly:

export default () => (
<div>
<p>Styled paragraph</p>
<style jsx>{`
p {
color: red;
}
`}</style>
</div>
);
Clipboard icon

Besides styled-jsx you can use any other CSS-in-JS technology. Here are a few recommendations:

Tailwind CSS

Tailwind CSSExternal link icon is a utility-first CSS framework packed with classes like flexpt-4text-center, and rotate-90 that can be composed to build any design directly in your markup.

commercetools Frontend comes with Tailwind CSS installed and pre-configured. Tailwind is configured in the file packages/<project>/frontend/tailwind.config.js. It provides a default configuration that you can adjust to your own needs.