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

Для интеграции Chakra UI с проектом на Gatsby необходимо установить пакет @chakra-ui/react и его зависимости. Основные шаги включают:

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

После установки требуется обернуть корневой компонент приложения в ChakraProvider, чтобы стили и темы были доступны во всей структуре компонентов. В Gatsby это делается через файл gatsby-browser.js и gatsby-ssr.js:

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

export const wrapRootElement = ({ element }) => (
  <ChakraProvider>
    {element}
  </ChakraProvider>
);

Такой подход обеспечивает поддержку SSR (Server-Side Rendering) и корректное рендеринг страниц на стороне сервера.

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

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

// src/theme/index.js
import { extendTheme } from "@chakra-ui/react";

const customTheme = extendTheme({
  colors: {
    brand: {
      50: "#f5f7ff",
      100: "#e0e7ff",
      500: "#3b82f6",
      900: "#1e3a8a",
    },
  },
  fonts: {
    heading: "'Poppins', sans-serif",
    body: "'Inter', sans-serif",
  },
  styles: {
    global: {
      body: {
        bg: "gray.50",
        color: "gray.800",
      },
    },
  },
});

export default customTheme;

Подключение темы осуществляется в wrapRootElement:

import customTheme from "./src/theme";

export const wrapRootElement = ({ element }) => (
  <ChakraProvider theme={customTheme}>
    {element}
  </ChakraProvider>
);

Это гарантирует единый стиль и палитру для всех компонентов в проекте.

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

Chakra UI предоставляет обширный набор компонентов, готовых к использованию. Наиболее часто используются Box, Flex, Stack, Button, Heading, Text, Image.

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

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

export default function Hero() {
  return (
    <Box textAlign="center" py={20} px={6} bg="brand.50">
      <Heading as="h1" size="2xl" mb={4} color="brand.500">
        Добро пожаловать в Gatsby с Chakra UI
      </Heading>
      <Text fontSize="lg" mb={6}>
        Быстро создавайте красивый интерфейс с минимальной настройкой.
      </Text>
      <Button colorScheme="brand" size="lg">
        Начать
      </Button>
    </Box>
  );
}

Работа с Layout и навигацией

Для построения глобальной структуры сайта удобно использовать Flex и Grid для сеток и меню. Пример простого layout-компонента:

import { Box, Flex, Link } from "@chakra-ui/react";
import { Link as GatsbyLink } from "gatsby";

export default function Layout({ children }) {
  return (
    <Box minH="100vh">
      <Flex as="nav" bg="brand.500" color="white" p={4} justify="space-between">
        <Link as={GatsbyLink} to="/" fontWeight="bold">
          Главная
        </Link>
        <Flex gap={4}>
          <Link as={GatsbyLink} to="/about">
            О нас
          </Link>
          <Link as={GatsbyLink} to="/contact">
            Контакты
          </Link>
        </Flex>
      </Flex>
      <Box as="main" p={8}>
        {children}
      </Box>
    </Box>
  );
}

Использование Link от Chakra UI вместе с GatsbyLink позволяет сохранить преимущества навигации Gatsby и стилизовать элементы через Chakra.

Работа с формами и интерактивными элементами

Chakra UI облегчает создание форм с контролем состояния, валидацией и UI-компонентами:

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

export default function ContactForm() {
  const [email, setEmail] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("Email:", email);
  };

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

Использование FormControl и FormLabel обеспечивает доступность и правильное оформление форм.

Анимации и переходы

Chakra UI интегрирован с framer-motion, что позволяет легко добавлять анимации:

import { Box, Button } from "@chakra-ui/react";
import { motion } from "framer-motion";

const MotionBox = motion(Box);

export default function AnimatedButton() {
  return (
    <MotionBox
      whileHover={{ scale: 1.1 }}
      whileTap={{ scale: 0.9 }}
    >
      <Button colorScheme="brand">Навести курсор</Button>
    </MotionBox>
  );
}

Такой подход позволяет создавать плавные эффекты без дополнительной настройки CSS.

Работа с темной темой и адаптивностью

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

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

export default function ThemeToggle() {
  const { colorMode, toggleColorMode } = useColorMode();

  return (
    <Box textAlign="center" mt={4}>
      <Button onCl ick={toggleColorMode}>
        Переключить на {colorMode === "light" ? "темную" : "светлую"} тему
      </Button>
    </Box>
  );
}

Адаптивность реализуется через массивы и объекты для пропсов:

<Box
  px={[4, 8, 16]} // малые, средние и большие экраны
  fontSize={{ base: "sm", md: "md", lg: "lg" }}
>
  Адаптивный текст
</Box>

Оптимизация Chakra UI для Gatsby

  • Использование CSSReset уже включено в ChakraProvider, что упрощает кроссбраузерную совместимость.
  • Для улучшения производительности следует минимизировать inline-стили и использовать theme tokens.
  • Компоненты можно lazy-загружать через динамический импорт, что уменьшает размер основного бандла Gatsby.

Интеграция с GraphQL и динамическим контентом

Gatsby строится на GraphQL, поэтому Chakra UI-компоненты часто используются для отображения данных из CMS:

import { graphql } from "gatsby";
import { Box, Heading, Text } from "@chakra-ui/react";

export default function BlogPost({ data }) {
  const post = data.markdownRemark;

  return (
    <Box maxW="800px" mx="auto" py={8}>
      <Heading mb={4}>{post.frontmatter.title}</Heading>
      <Text mb={6}>{post.frontmatter.date}</Text>
      <Box dangerouslySetInnerHTML={{ __html: post.html }} />
    </Box>
  );
}

export const query = graphql`
  query($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      frontmatter {
        title
        date(formatString: "DD MMMM, YYYY")
      }
    }
  }
`;

Использование Chakra UI позволяет красиво оформить динамический контент без ручного CSS.

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

Оглавление