Перейти к основному содержимому

Стилизация Компонентов

Данный документ описывает правила стилизации компонентов во frontend‑приложении Magnet.

1. Библиотека стилизации​

В проекте используется библиотека Stitches — современное CSS‑in‑JS решение, обеспечивающее высокую производительность и типобезопасность стилей.

2. Запрет на инлайн‑стили​

Инлайн‑стили (style={{ ... }}) не используются в проекте. Все стили определяются через styled‑компоненты или через проп sx в Material‑UI для динамических случаев.

3. Конфигурация тем и стилей​

Основная конфигурация Stitches находится в следующих файлах:

  • apps/frontend/src/shared/styles/stitches.styles.ts — основная конфигурация для приложения
  • apps/frontend/src/widgets/landing/lib/shared/styles/stitches.styles.ts — конфигурация для лендинга

Конфигурация включает:

  • media — набор breakpoints для адаптивности (toMobile, toTablet, toDesktop и т. д.)
  • theme — базовые цвета темы (background, card)

4. Подход к стилизации компонентов​

При создании стилизованных компонентов используется следующий паттерн:

  1. Сначала создаётся компонент через let.
  2. Затем он перезаписывается с помощью styled.

Пример 1: стилизация через Stitches​

const Content = styled('div', { display: 'flex', gap: 40, marginBottom: 40 });

Пример 2: стилизация через Material‑UI​

const CustomCard = styled(Card)(({ theme }) => ({
    backgroundColor: theme.palette.primary.main,
    borderRadius: '1rem',
}));

5. Импорт кастомного styled​

Всегда импортируйте styled из нашей кастомной конфигурации, а не напрямую из библиотек.

Правильно:

import { styled } from '@shared/styles';

Неправильно:

import { styled } from '@stitches/react'; // Не использовать!

6. Лучшие практики​

  • Используйте styled для статических стилей.
  • Избегайте инлайн‑стилей (style={{ ... }}).
  • Используйте предопределённые media‑запросы из конфигурации (toMobile, toTablet и т. д.).
  • Создавайте именованные компоненты для повторно используемых стилей.

7. Пример полного компонента​

import { FC } from 'react';
import { styled } from '@shared/styles';

let MyComponent: FC = () => {
    return (
        <div>
            <h1>Заголовок</h1>
        </div>
    );
};

MyComponent = styled(MyComponent, {
    display: 'flex',
    flexDirection: 'column',
    gap: 20,
    '@toMobile': {
        gap: 10,
    },
});

export { MyComponent };

Придерживайтесь описанных практик для поддержания качества и согласованности кода.