CSS Module patterns

A CSS module is a CSS file where class names are processed so that they may not clash with ones that live in other stylesheets.

A CSS module is class-centric, and it's a good practice to avoid setting global style in it.

The classes defined in a CSS module are gathered in a single JS object. We may import such object and make use of a class by doing a lookup on its canonical name.

import classes from "xxx.module.css";

<Button
classNames={{
        root: classes.xxx, 	// resolves to the processed class
        label: classes.xxx,	// resolves to the processed class
    }}
  >

one module to one Mantine's component pattern

In this pattern, the CSS Module provides style for a specific Mantine component such as Button: we effectively create a variant, such as a primary button or a pink button. We may name the CSS Module with the variant name: PrimaryButton.module.css

We name the classes directly with the inner-component name we want to target.

/* PrimaryButton.module.css */
.root {
}

.root:hover {
}

.label {
}

import PrimaryButtonClassNames from "PrimaryButton.module.css";
{/* provide properties */}
<Button
classNames={{
        root: PrimaryButtonClassNames.root,
        label: PrimaryButtonClassNames.label,
    }}
  >

provide the classes object directly

When we follow this pattern, we may provide the classes object to classNames.

<Button classNames={primaryButtonClassNames}>