Принципы Style Props

Chakra UI предоставляет мощный механизм Style Props, который позволяет управлять визуальным оформлением компонентов через пропсы, а не отдельные CSS-файлы. Это обеспечивает однородность, удобство и масштабируемость интерфейсов в React-приложениях.

Основные концепции

Style Props — это свойства компонентов, которые напрямую соответствуют CSS-свойствам. Например, пропсы margin, padding, color, bg управляют отступами, цветом текста и фона.

Примеры базовых пропсов:

<Box bg="blue.500" color="white" p={4} m={2}>
  Пример блока
</Box>
  • bg="blue.500" — задаёт цвет фона из цветовой палитры Chakra UI.
  • color="white" — цвет текста.
  • p={4} — внутренний отступ (padding), используя систему спейсов Chakra.
  • m={2} — внешний отступ (margin).

Система спейсов и размеров

Chakra UI использует предопределённую систему спейсов, основанную на множителях числа 4.

  • p={4} → 16px
  • m={2} → 8px

Также можно использовать сокращения:

  • px — горизонтальный padding
  • py — вертикальный padding
  • mx — горизонтальный margin
  • my — вертикальный margin

Пример:

<Box px={6} py={3} bg="green.300">
  Горизонтальные и вертикальные отступы
</Box>

Цвета и темы

Цвета в Chakra UI интегрированы с тематической системой. Можно использовать палитры: blue.500, red.200, gray.700 и т.д.

Пример использования текста и фона:

<Text color="purple.600" bg="purple.100" p={3}>
  Цвет текста и фона
</Text>

Ключевой принцип: все цвета должны использоваться через тему для обеспечения консистентности интерфейса и возможности централизованной кастомизации.

Работа с шрифтами и типографикой

Style Props позволяют управлять:

  • fontSize — размер шрифта
  • fontWeight — толщина шрифта
  • lineHeight — высота строки
  • letterSpacing — межбуквенное расстояние
  • textAlign — выравнивание текста

Пример:

<Text fontSize="lg" fontWeight="bold" lineHeight="tall" textAlign="center">
  Пример текста
</Text>

Размеры шрифтов и высоты строки также могут быть определены через тему, что упрощает поддержку единого стиля в приложении.

Flex и Grid через Style Props

Chakra UI поддерживает Flexbox и Grid через пропсы:

Flexbox:

<Box display="flex" justifyContent="space-between" alignItems="center">
  <Box>Левый элемент</Box>
  <Box>Правый элемент</Box>
</Box>
  • display="flex" — делает контейнер flex-контейнером
  • justifyContent — выравнивание по основной оси
  • alignItems — выравнивание по перекрестной оси

Grid:

<Grid templateColumns="repeat(3, 1fr)" gap={4}>
  <Box bg="red.200">1</Box>
  <Box bg="green.200">2</Box>
  <Box bg="blue.200">3</Box>
</Grid>
  • templateColumns задаёт структуру колонок
  • gap — расстояние между элементами

Состояния и псевдоклассы

Chakra UI позволяет управлять состояниями элементов через специальные пропсы:

  • _hover — состояние при наведении
  • _active — состояние при нажатии
  • _focus — состояние при фокусе

Пример кнопки с изменением цвета при наведении:

<Button bg="blue.500" color="white" _hover={{ bg: "blue.600" }}>
  Наведи курсор
</Button>

Responsive Style Props

Chakra UI поддерживает адаптивные пропсы через массивы или объекты:

<Box fontSize={["sm", "md", "lg"]} p={{ base: 2, md: 4, lg: 6 }}>
  Адаптивный блок
</Box>
  • Массив: [sm, md, lg] — для разных точек останова (base, sm, md, lg, xl)
  • Объект: { base: 2, md: 4 } — задаёт конкретные значения для каждой точки останова

Кастомизация через тему

Все Style Props интегрированы с темой Chakra UI, что позволяет:

  • Создавать собственные цвета и шрифты
  • Настраивать размеры и спейсы
  • Определять глобальные стили компонентов

Пример расширения темы:

const theme = extendTheme({
  colors: {
    brand: {
      100: "#f7c948",
      500: "#d69e2e",
    },
  },
  fonts: {
    heading: "Roboto, sans-serif",
    body: "Open Sans, sans-serif",
  },
});

Использование новых цветов:

<Box bg="brand.500" color="white" p={4}>
  Брендовый блок
</Box>

Итоговая структура использования Style Props

  1. Определить структуру компонента (Box, Flex, Grid)
  2. Настроить отступы и размеры через спейсы
  3. Применить цвета и шрифты через тему
  4. Добавить псевдосостояния и адаптивность
  5. При необходимости кастомизировать тему для единообразного стиля

Такой подход делает интерфейс чистым, масштабируемым и легко поддерживаемым без прямого написания CSS.

Оглавление