Files
svg-sprites/preview/ai/triggers/develop/style-component.md
S.Gromov e77e7dfcf1 refactor: заменить shiki на самописный highlighter и обновить архитектуру
- Удалён shiki (9.5→0 МБ), создан regex-токенизатор для html/css/xml
- CLI переведён с аргументов на конфиг-файл svg-sprites.config.ts
- Превью переработано: React-приложение вместо инлайн HTML
- Добавлен футер с названием пакета и ссылкой на репозиторий
- Исправлена загрузка dev-data.js для Vite 8
- Футер прижат к низу, содержимое центрировано
2026-04-22 16:54:35 +03:00

1.5 KiB
Raw Blame History

title
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