Распространенные ошибки

Одной из самых частых проблем при работе с Chakra UI является неправильная установка или некорректная интеграция с проектом. Библиотека требует наличия React версии 18 и выше и правильного подключения темы через ChakraProvider. Ошибки типа:

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

function App() {
  return (
    <ChakraProvider>
      <YourComponent />
    </ChakraProvider>
  );
}

могут приводить к невидимым компонентам, если ChakraProvider не охватывает весь дерево компонентов приложения. Также важно убедиться, что все зависимости @chakra-ui/react, @emotion/react, @emotion/styled и framer-motion установлены корректно и их версии совместимы.

Неправильное использование темы

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

const theme = extendTheme({
  colors: {
    brand: {
      100: "#f7fafc",
      900: "#1a202c",
    },
  },
});

<Box bg="brand.500">Текст</Box> // Ошибка: brand.500 не определён

Важно помнить, что любые новые ключи должны быть полностью описаны, иначе Chakra не сможет их интерпретировать.

Проблемы с отступами и размерами

Chakra UI использует систему spacing и sizing, где значения связаны с scale (4px * индекс). Ошибки возникают при:

  • Использовании несуществующих индексов, например p={7.5} вместо допустимого p={7}.
  • Попытке смешивать числовые и строковые значения (px или %) без корректного синтаксиса:
<Box w="50" /> // Ошибка: нужно w="50px" или w={50}

Следует внимательно следить за типами данных, которые ожидают компоненты.

Неправильная работа с Flex и Grid

Chakra UI предоставляет мощные Flex и Grid компоненты, но их часто используют с конфликтующими свойствами:

<Flex direction="row" align="center" justify="space-between">
  <Box flex="1" />
  <Box flex="2" />
</Flex>

Ошибка возникает при одновременном применении width к дочерним элементам и flex, что ведёт к некорректному распределению пространства. Для правильного использования нужно четко понимать, какие свойства контролируют размер, выравнивание и распределение.

Ошибки при работе с формами

Компоненты Input, Select, Checkbox и Radio требуют корректного управления состоянием. Частая ошибка:

<Input value={undefined} onCha nge={() => {}} /> // Не будет работать корректно

Необходимо всегда задавать контролируемые или неконтролируемые компоненты. Для контролируемого варианта value не может быть undefined, лучше использовать пустую строку:

<Input value={value || ""} onCha nge={handleChange} />

Также важно использовать FormControl и FormLabel для корректного связывания с FormErrorMessage при валидации.

Ошибки в работе с модальными окнами и порталом

Компоненты Modal, Drawer и Portal требуют корректного контекста для работы. Распространённые ошибки:

  • Использование Modal без ChakraProvider.
  • Размещение модального окна вне корня DOM, что вызывает проблемы с z-index и фокусом.
  • Игнорирование initialFocusRef и finalFocusRef, что нарушает доступность.

Проблемы с адаптивным дизайном

Chakra UI поддерживает responsive props, но часто их используют неправильно:

<Box fontSize={["sm", "md", "lg", "xl"]} /> // Правильно
<Box fontSize={["sm", "lg"]} /> // Ошибка: недостаточно значений для всех брейкпоинтов

Каждое responsive значение должно соответствовать последовательности брейкпоинтов, иначе компонент может отображаться некорректно на разных экранах.

Игнорирование доступности (A11y)

Chakra UI ориентирован на доступность, но её легко нарушить. Примеры ошибок:

  • Использование Button с пустым текстом или без aria-label.
  • Игнорирование isDisabled на интерактивных компонентах.
  • Неправильная комбинация VisuallyHidden с видимыми элементами, что мешает экранным читалкам.

Правильная практика — всегда проверять ARIA-свойства и следовать рекомендациям Chakra по доступности.

Ошибки при кастомизации компонентов

Использование styled и sx требует осторожности:

<Box sx={{ display: "flex", justifyContent: "center" }} />
<Box display="inline-flex" /> // Конфликт стилей

При наложении нескольких способов стилизации может возникнуть непредсказуемое поведение, поэтому рекомендуется выбирать один метод: либо props Chakra, либо sx/css/styled.

Ошибки с анимациями и motion

Chakra интегрируется с framer-motion, но ошибки часто связаны с:

  • Использованием motion.div без AnimatePresence для условного рендера.
  • Одновременным управлением анимацией через props Chakra и Motion, что вызывает конфликты.
  • Игнорированием exit анимаций, из-за чего компоненты исчезают резко.

Правильная стратегия — использовать Motion компоненты через Chakra factory (chakra(motion.div)) и строго следовать документации.

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

Оглавление