CSS Module patterns

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

A CSS module should not trigger global style changes such as targeting the :root element or any other html element.

Instead, the CSS module should only provide style through classes. We may retrieve such classes by importing the object that contains those classes, from a React component that intends to make use of one or more classes.

import classes from "xxx.module.css";

<Button
classNames={{
        root: classes.xxx,
        label: classes.xxx,
    }}
  >

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 of it, such as a primary button. As such, 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}>