Композиция компонентов

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

В Chakra UI большинство компонентов построены с учетом декларативного стиля, где внешний вид и поведение компонентов можно комбинировать, не создавая лишнего кода. Базовые элементы, такие как Box, Flex и Stack, служат фундаментом для построения более сложных компонентов.

Box и Flex как строительные блоки

Box — универсальный контейнер для любого контента. Он поддерживает все стандартные CSS-свойства через пропсы, что позволяет использовать его как каркас для сложных компонентов.

import { Box } from "@chakra-ui/react";

<Box
  bg="teal.500"
  color="white"
  p={4}
  borderRadius="md"
>
  Пример Box
</Box>

Flex наследует свойства Box и добавляет возможности Flexbox, что делает его идеальным для компоновки элементов по горизонтали или вертикали.

import { Flex, Box } from "@chakra-ui/react";

<Flex justify="space-between" align="center" p={4}>
  <Box>Левый блок</Box>
  <Box>Правый блок</Box>
</Flex>

Использование Flex позволяет избавиться от лишнего CSS и управлять расположением элементов через пропсы: justify, align, direction.

Stack и VStack/HStack для упрощения верстки

Stack — это компонент для вертикального или горизонтального расположения элементов с равными промежутками. Он упрощает работу с отступами и выравниванием.

  • VStack — вертикальный стек
  • HStack — горизонтальный стек
import { VStack, Button } from "@chakra-ui/react";

<VStack spacing={4} align="stretch">
  <Button colorScheme="blue">Кнопка 1</Button>
  <Button colorScheme="green">Кнопка 2</Button>
  <Button colorScheme="red">Кнопка 3</Button>
</VStack>

Stack автоматически добавляет промежутки между дочерними элементами через проп spacing, что устраняет необходимость в ручном управлении margin.

Создание собственных составных компонентов

Chakra UI позволяет создавать кастомные компоненты, комбинируя базовые элементы с пропсами и дополнительной логикой. Например, компонент карточки:

import { Box, Image, Text, Button } from "@chakra-ui/react";

function Card({ image, title, description, onClick }) {
  return (
    <Box
      borderWidth="1px"
      borderRadius="lg"
      overflow="hidden"
      p={4}
      bg="white"
      shadow="md"
    >
      <Image src={image} alt={title} borderRadius="md" />
      <Text fontSize="xl" mt={2} fontWeight="bold">{title}</Text>
      <Text mt={2} color="gray.600">{description}</Text>
      <Button mt={4} colorScheme="teal" onCl ick={onClick}>Подробнее</Button>
    </Box>
  );
}

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

Использование as для изменения рендеринга

Любой компонент Chakra UI поддерживает проп as, который позволяет изменять HTML-элемент, рендерящий компонент, без потери стилизации.

import { Button } from "@chakra-ui/react";

<Button as="a" href="https://chakra-ui.com" colorScheme="blue">
  Перейти на сайт
</Button>

Это полезно при создании компонентов, которые должны быть интерактивными ссылками, но сохранять стили кнопки.

Контейнеры и композиция с Layout

Для построения сложной структуры страницы часто используют Container и компоненты для сетки (Grid, SimpleGrid). Они помогают логически структурировать интерфейс, разделяя контент на блоки.

import { Container, SimpleGrid, Box } from "@chakra-ui/react";

<Container maxW="container.lg" p={4}>
  <SimpleGrid columns={[1, 2, 3]} spacing={6}>
    <Box bg="red.200" p={4}>Блок 1</Box>
    <Box bg="green.200" p={4}>Блок 2</Box>
    <Box bg="blue.200" p={4}>Блок 3</Box>
  </SimpleGrid>
</Container>

Использование SimpleGrid облегчает создание адаптивных макетов без сложного медиазапросного CSS.

Переиспользование стилей через chakra и extendTheme

Библиотека позволяет создавать кастомные компоненты с заранее заданными стилями, используя chakra или расширяя тему через extendTheme.

import { chakra } from "@chakra-ui/react";

const CustomButton = chakra("button", {
  baseStyle: {
    bg: "teal.400",
    color: "white",
    px: 6,
    py: 3,
    borderRadius: "md",
    _hover: { bg: "teal.500" },
  },
});

<CustomButton>Кастомная кнопка</CustomButton>

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

Выводы по композиции компонентов

Chakra UI строится вокруг модульной и переиспользуемой архитектуры, где:

  • Простые блоки (Box, Flex) служат фундаментом.
  • Стэки (VStack, HStack) упрощают верстку с равными отступами.
  • Кастомные компоненты повышают повторное использование и читаемость кода.
  • Проп as позволяет гибко менять тип HTML-элемента без потери стилей.
  • Контейнеры и сетки создают логичную и адаптивную структуру интерфейса.

Комплексное использование этих подходов обеспечивает чистую, понятную и поддерживаемую архитектуру компонентов в приложениях на Chakra UI.

Оглавление