---
title: Стилизовать компонент
---

# Стилизовать компонент

Инструкция по выбору подхода к стилизации и написанию стилей для компонента.

## Прочитай перед началом

- applied/styles.md — правила CSS: PostCSS Modules, токены, медиа-запросы

## Шаги

1. Определи подход (→ applied/styles.md):
   - Mantine-компонент → используй пропсы Mantine, не пиши CSS
   - CSS-токены достаточно → используй токены
   - Нужна кастомная стилизация → PostCSS Modules

2. Создай файл стилей `{component-name}.module.css` рядом с компонентом.

3. Напиши стили по правилам (→ applied/styles.md).

4. Подключи стили в компоненте через `cl()`.

## Смежные триггеры

- triggers/develop/create-component.md — если компонент ещё не создан
- triggers/develop/add-icon.md — если нужна иконка в компоненте

## Проверь себя

- [ ] Приоритет стилизации соблюдён: Mantine → токены → PostCSS Modules
- [ ] Нет инлайн-стилей и магических значений
- [ ] Файл стилей именован `{component-name}.module.css`