36 lines
1.5 KiB
Markdown
36 lines
1.5 KiB
Markdown
|
---
|
|||
|
|
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`
|