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>;
}

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>
}

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 the CSS into app/layout.tsx:

import './app.css';

export default function RootLayout({ children, params }: LayoutProps) {
  const { locale } = params;

  return (
    <html lang={locale}>
      <body>{children}</body>
    </html>
  );
}

export default appWithTranslation(FrontasticStarter);

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';

For global CSS like bootstrap you should import those styles inside app/layout.tsx. For component-level CSS, you can import the styles inside a component directly:

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

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;
}

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;

Sass

commercetools Frontend lets you 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.

Install Sass before using it by running the following command.

Install Sassshell

yarn add sass

Sass supports two syntaxes, each with their own extension. The .scss extension requires the SCSS syntax, while the .sass extension requires the Indented Syntax (Sass). If you don't know which one to choose, start with the .scss extension, since it is a superset of CSS and doesn't require learning 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-jsx 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>
);

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

Tailwind CSS

Tailwind CSS is a utility-first CSS framework packed with classes like flex, pt-4, text-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.