Миграция с других библиотек

При переходе с других библиотек компонентов, таких как Material-UI, Ant Design или Bootstrap, основными факторами выбора Chakra UI становятся простота стилизации, гибкость темы и интеграция с React. Chakra UI строится на концепции стильных пропсов, что позволяет задавать визуальные свойства компонентов напрямую через атрибуты, без необходимости создания отдельных CSS-файлов или использования сложных CSS-in-JS решений.

Другой ключевой аспект — адаптивная верстка из коробки. Свойства responsive позволяют задавать разные значения для разных брейкпоинтов без дополнительного кода. Это значительно ускоряет миграцию и уменьшает количество потенциальных ошибок при конвертации компонентов.

Подготовка проекта к миграции

Перед началом миграции рекомендуется:

  1. Установить Chakra UI и базовые зависимости:
npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion
  1. Обернуть приложение в ChakraProvider и подключить тему:
import { ChakraProvider } from '@chakra-ui/react';
import theme from './theme';
import App from './App';

const Root = () => (
  <ChakraProvider theme={theme}>
    <App />
  </ChakraProvider>
);

export default Root;
  1. Создать кастомную тему, если проект использует уникальные цвета, шрифты или брейкпоинты:
import { extendTheme } from '@chakra-ui/react';

const theme = extendTheme({
  colors: {
    primary: {
      100: '#E3F2FD',
      500: '#2196F3',
    },
  },
  fonts: {
    heading: 'Roboto, sans-serif',
    body: 'Open Sans, sans-serif',
  },
});

export default theme;

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

Кнопки

При миграции кнопок с Material-UI Button на Chakra UI Button структура становится проще:

Material-UI:

<Button variant="contained" color="primary" size="large">
  Отправить
</Button>

Chakra UI:

<Button colorScheme="blue" size="lg">
  Отправить
</Button>

Ключевые различия:

  • variant="contained" → colorScheme="..."
  • size с Material-UI (small, medium, large) → sm, md, lg
  • Полная кастомизация через пропсы: bg, color, borderRadius, boxShadow.

Поля ввода и формы

Chakra UI использует обертку FormControl для управления состоянием валидности и лейблов:

<FormControl isRequired>
  <FormLabel>Email</FormLabel>
  <Input type="email" placeholder="Введите email" />
  <FormHelperText>Мы никогда не передадим ваш email третьим лицам.</FormHelperText>
</FormControl>

Преимущество в том, что все состояния (валидность, ошибки, хелперы) управляются внутри одного компонента, что упрощает миграцию с Formik или React Hook Form.

Сетки и макеты

Chakra UI предлагает Flex, Grid и Stack для построения макетов без лишнего CSS:

  • Flex: горизонтальное или вертикальное выравнивание элементов.
<Flex justify="space-between" align="center">
  <Box>Левый блок</Box>
  <Box>Правый блок</Box>
</Flex>
  • Grid: полноценная сетка с колонками и рядами.
<Grid templateColumns="repeat(3, 1fr)" gap={6}>
  <Box bg="red.100">1</Box>
  <Box bg="green.100">2</Box>
  <Box bg="blue.100">3</Box>
</Grid>
  • Stack: упрощает вертикальное или горизонтальное расположение элементов с автоматическим отступом.
<Stack spacing={4} direction="row">
  <Button>Да</Button>
  <Button>Нет</Button>
</Stack>

Работа с темами и стилями

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

  • Цветовые схемы: можно создавать кастомные палитры и назначать их компонентам через colorScheme.
  • Шрифты и типографика: через объект fonts в теме.
  • Глобальные стили: через styles.global можно задать CSS, аналогичный global.css из других библиотек.
const theme = extendTheme({
  styles: {
    global: {
      body: {
        bg: 'gray.50',
        color: 'gray.800',
      },
    },
  },
});

Адаптивность и медиазапросы

Chakra UI упрощает адаптивный дизайн:

<Box fontSize={['sm', 'md', 'lg']} p={[2, 4, 6]}>
  Адаптивный текст и отступ
</Box>
  • Первый элемент массива → мобильный (sm)
  • Второй → планшет (md)
  • Третий → десктоп (lg)

При миграции это позволяет избавиться от написания громоздких CSS-медиа-запросов.

Замена иконок и дополнительных библиотек

Chakra UI интегрируется с @chakra-ui/icons или любыми React-иконками:

import { AddIcon } from '@chakra-ui/icons';

<Button leftIcon={<AddIcon />} colorScheme="teal">
  Добавить
</Button>

Это упрощает замену иконок с Material-UI @mui/icons-material без изменения логики компонентов.

Инкрементальная миграция

Миграция не требует полной переработки проекта. Можно:

  1. Постепенно заменять кнопки и формы.
  2. Создавать адаптеры для старых компонентов, чтобы использовать новые стили.
  3. Использовать тему для унификации цветов и шрифтов между старыми и новыми компонентами.

Советы при миграции

  • Сначала перевести базовые элементы (кнопки, поля, контейнеры), затем сложные компоненты (таблицы, модальные окна).
  • Создать централизованную тему с палитрой и шрифтами, чтобы все новые компоненты выглядели одинаково.
  • Использовать Stack и Flex для замены сложных CSS-сеток.
  • Проверять адаптивность на разных разрешениях экрана сразу после конвертации.

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

Оглавление