CSS-модули

CSS-модули — это система, которая позволяет писать CSS таким образом, чтобы имена классов были локальными по умолчанию. Это означает, что CSS, написанный в одном модуле, не будет конфликтовать с CSS, написанным в другом модуле, даже если они используют одинаковые имена классов.

.card {
  height: 420px;
  width: 420px;
  border: 1px solid gray;
  border-radius: 8px;
}

.container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.image {
  height: 120px;
  width: 100%;
}

.title {
  font-size: 20px;
  font-weight: bold;
}

.description {
  font-size: 18px;
}

/* props variant */
.v {
  &-primary {
    background-color: white;
  }

  &-secondary {
    background-color: aliceblue;
  }
}

/* props size */
.s {
  &-small {
    padding: 4px;
  }

  &-middle {
    padding: 8px;
  }

  &-large {
    padding: 12px;
  }
}

Подключение CSS-модулей

Директорияproduct-card/
- product-card.tsx — компонент
- product-card.module.scss — стили компонента

import { FC } from "react";
import styles from "./product-card.module.scss";

interface ProductCardProps {}

export const ProductCard: FC<ProductCardProps> = () => {
  ...
  return (
    <div className={styles.card}>
      ...
    </div>
)}

Для подключения нескольких классов к одному элементу нужно использовать библиотеку clsx:

import { FC } from "react";
import styles from "./product-card.module.scss";
import clsx from "clsx";

interface ProductCardProps {
  ...
  variant?: "primary" | "secondary";
  size?: "small" | "medium" | "large";
}

export const ProductCard: FC<ProductCardProps> = ({
  ...
  variant = "primary",
  size = "medium",
}) => {
  return (
    <div className={clsx(styles.card, styles[`v-${variant}`]), styles[`s-${size}`])}>
    ...
    </div>
  );
};