Интеграция с Vite

Для начала работы с Chakra UI в проекте на Vite необходимо установить пакет @chakra-ui/react вместе с зависимостями для управления стилями и анимациями. Наиболее часто используется комбинация с @emotion/react, @emotion/styled и framer-motion:

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

После установки создаётся базовая структура приложения Vite с поддержкой React:

npm create vite@latest my-chakra-app --template react
cd my-chakra-app
npm install

Далее в точке входа приложения (main.jsx или main.tsx) подключается ChakraProvider, который обеспечивает контекст темы и стили для всех компонентов Chakra UI.

import React from "react";
import ReactDOM from "react-dom/client";
import { ChakraProvider } from "@chakra-ui/react";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")).render(
  <ChakraProvider>
    <App />
  </ChakraProvider>
);

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

Настройка темы

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

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

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

const customTheme = extendTheme({
  colors: {
    brand: {
      50: "#f5f7ff",
      100: "#e0e7ff",
      200: "#c7d2fe",
      300: "#a5b4fc",
      400: "#818cf8",
      500: "#6366f1",
      600: "#4f46e5",
      700: "#4338ca",
      800: "#3730a3",
      900: "#312e81",
    },
  },
  fonts: {
    heading: "'Inter', sans-serif",
    body: "'Inter', sans-serif",
  },
});

export default customTheme;

Подключение темы в приложении:

import { ChakraProvider } from "@chakra-ui/react";
import customTheme from "./theme";

<ChakraProvider theme={customTheme}>
  <App />
</ChakraProvider>

Использование кастомных цветов и шрифтов через useStyleConfig или напрямую в пропсах компонентов обеспечивает единообразие интерфейса.

Интеграция с Vite: особенности

Vite компилирует проект очень быстро, но есть нюансы при работе с Chakra UI:

  1. SSR и hydration – Chakra UI корректно работает с серверным рендерингом, но нужно убедиться, что ChakraProvider оборачивает корневой компонент до рендера на сервере.
  2. Пути к файлам стилей – при использовании @emotion/react и framer-motion нужно следить за корректной настройкой Vite для CSS-in-JS. Обычно стандартной конфигурации достаточно.
  3. Автоматическая поддержка tree-shaking – благодаря ES-модулям, Vite позволяет импортировать только используемые компоненты Chakra UI, что минимизирует размер сборки.

Использование компонентов Chakra UI

Все компоненты Chakra UI оптимизированы для работы в Vite, поддерживают TypeScript и автоматическое дерево импорта. Пример создания интерфейса с кнопкой и модальным окном:

import { Box, Button, Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalFooter, useDisclosure } from "@chakra-ui/react";

function Example() {
  const { isOpen, onOpen, onClose } = useDisclosure();

  return (
    <Box p={4}>
      <Button colorScheme="brand" onCl ick={onOpen}>
        Открыть модальное окно
      </Button>

      <Modal isOpen={isOpen} onCl ose={onClose}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>Пример модального окна</ModalHeader>
          <ModalBody>
            Контент модального окна с кастомными стилями и адаптивностью.
          </ModalBody>
          <ModalFooter>
            <Button variant="ghost" onCl ick={onClose}>Закрыть</Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </Box>
  );
}

export default Example;

Каждый компонент полностью совместим с Vite и поддерживает props для управления стилями, а также адаптивные свойства через объект sx или пропсы типа padding, margin, colorScheme.

Оптимизация и расширенные возможности

  1. Переопределение компонентов – с помощью componentStyleConfig можно создавать кастомные версии стандартных компонентов.
  2. Адаптивность – Chakra UI использует объектные пропсы для разных брейкпоинтов, что позволяет строить интерфейс без медиазапросов:
<Box fontSize={{ base: "sm", md: "md", lg: "lg" }}>
  Адаптивный текст
</Box>
  1. Использование с TypeScript – благодаря типам Chakra UI интегрируется с Vite без проблем. Подсказки для пропсов и тем облегчают разработку.
  2. Tree-shaking и lazy-loading – при большом проекте рекомендуется импортировать компоненты по отдельности:
import { Button } from "@chakra-ui/react";

Это уменьшает размер итоговой сборки, что особенно важно для SPA, собранного через Vite.

Работа с формами и состояниями

Chakra UI предоставляет удобные хуки и компоненты для форм:

import { FormControl, FormLabel, Input, Button } from "@chakra-ui/react";
import { useState } from "react";

function FormExample() {
  const [value, setValue] = useState("");

  return (
    <form>
      <FormControl id="email" isRequired>
        <FormLabel>Email</FormLabel>
        <Input
          type="email"
          value={value}
          onCha nge={(e) => setValue(e.target.value)}
          placeholder="Введите email"
        />
      </FormControl>
      <Button mt={4} colorScheme="brand" type="submit">
        Отправить
      </Button>
    </form>
  );
}

export default FormExample;

Хуки useDisclosure, useToast и другие позволяют управлять состояниями компонентов без дополнительного Redux или Context API, что делает проект на Vite лёгким и быстрым.

Подключение кастомных шрифтов и глобальных стилей

Для интеграции кастомных шрифтов можно использовать стандартные импорты CSS или подключение через @font-face в глобальных стилях Chakra UI:

import { Global } from "@emotion/react";

<Global
  styles={`
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
    body {
      font-family: 'Inter', sans-serif;
    }
  `}
/>

В Vite такие импорты работают сразу, так как сборщик поддерживает CSS и постпроцессинг.

Итоговые рекомендации по интеграции с Vite

  • Всегда оборачивать приложение в ChakraProvider.
  • Настраивать тему через extendTheme для единообразного дизайна.
  • Использовать tree-shaking и lazy-loading для уменьшения сборки.
  • Применять адаптивные пропсы для компонентов вместо медиазапросов.
  • Использовать хуки Chakra UI для управления состояниями UI без сторонних библиотек.

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

Оглавление