Базовая конфигурация проекта

Для интеграции Chakra UI в проект на React требуется установка пакетов через npm или yarn:

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

Или:

yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion

После установки необходимо обернуть корневой компонент приложения в ChakraProvider, который обеспечивает доступ ко всем компонентам и стилям библиотеки:

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

ReactDOM.render(
  <ChakraProvider>
    <App />
  </ChakraProvider>,
  document.getElementById('root')
);

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

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

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

import { extendTheme, ChakraProvider } from '@chakra-ui/react';

const customTheme = extendTheme({
  colors: {
    brand: {
      50: '#f5f7ff',
      100: '#e0e7ff',
      200: '#b3bcff',
      300: '#8091ff',
      400: '#4d65ff',
      500: '#1a38ff',
      600: '#0026cc',
      700: '#001999',
      800: '#000d66',
      900: '#000533',
    },
  },
  fonts: {
    heading: 'Montserrat, sans-serif',
    body: 'Inter, sans-serif',
  },
});

function Root() {
  return (
    <ChakraProvider theme={customTheme}>
      <App />
    </ChakraProvider>
  );
}

Ключевые моменты настройки темы:

  • Colors: создаются пользовательские цветовые палитры с градациями от 50 до 900.
  • Fonts: настраиваются шрифты для заголовков и текста.
  • Components: можно задавать стили по умолчанию для конкретных компонентов (например, кнопок или модальных окон).

Конфигурация цветов и цветовой схемы

Chakra UI использует систему цветовых тонов, которая позволяет динамически изменять внешний вид компонентов в зависимости от состояния (hover, active, focus). Для применения пользовательских цветов достаточно указать ключевые значения в объекте colors темы:

<Button colorScheme="brand">Нажми меня</Button>

Здесь "brand" — это имя пользовательской палитры, определённой в customTheme.colors.

Для работы с темной и светлой темами используется useColorMode:

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

function ThemeToggle() {
  const { colorMode, toggleColorMode } = useColorMode();
  
  return (
    <Button onCl ick={toggleColorMode}>
      Переключить на {colorMode === 'light' ? 'темную' : 'светлую'} тему
    </Button>
  );
}

ChakraProvider автоматически учитывает цветовую схему при рендеринге компонентов.

Типографика

Chakra UI предоставляет гибкую систему управления шрифтами и размерами текста. В теме можно определить:

  • Fonts — семейства шрифтов.
  • FontSizes — размеры текста.
  • FontWeights — толщину шрифта.
  • LineHeights — высоту строки.

Пример настройки:

const theme = extendTheme({
  fonts: {
    heading: 'Roboto, sans-serif',
    body: 'Open Sans, sans-serif',
  },
  fontSizes: {
    xs: '12px',
    sm: '14px',
    md: '16px',
    lg: '18px',
    xl: '20px',
    '2xl': '24px',
    '3xl': '30px',
    '4xl': '36px',
  },
});

Компоненты автоматически наследуют эти значения через пропсы size, fontWeight, lineHeight.

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

Chakra UI позволяет задавать глобальные стили компонентов через объект components в теме. Это упрощает единообразное оформление приложения.

Пример настройки кнопок:

const theme = extendTheme({
  components: {
    Button: {
      baseStyle: {
        fontWeight: 'bold',
        borderRadius: 'md',
      },
      sizes: {
        lg: {
          h: '48px',
          fontSize: 'lg',
          px: '32px',
        },
      },
      variants: {
        solid: {
          bg: 'brand.500',
          color: 'white',
          _hover: { bg: 'brand.600' },
        },
      },
    },
  },
});
  • baseStyle задаёт базовые свойства для всех кнопок.
  • sizes позволяет определять предустановленные размеры (sm, md, lg).
  • variants создают визуальные модификации кнопок (solid, outline, ghost и т.д.).

Подключение глобальных стилей

Chakra UI поддерживает глобальные CSS через styles.global:

const theme = extendTheme({
  styles: {
    global: {
      'html, body': {
        fontSize: '16px',
        color: 'gray.800',
        bg: 'gray.50',
      },
      a: {
        color: 'brand.500',
        _hover: {
          textDecoration: 'underline',
        },
      },
    },
  },
});

Это позволяет задать единый стиль для всего приложения, включая стандартные HTML-теги.

Настройка цветового режима по умолчанию

Для автоматического использования темной или светлой темы при загрузке приложения используется initialColorMode:

import { extendTheme } from '@chakra-ui/react';
import { mode } from '@chakra-ui/theme-tools';

const theme = extendTheme({
  config: {
    initialColorMode: 'light', // или 'dark'
    useSystemColorMode: true,
  },
  styles: {
    global: (props) => ({
      body: {
        bg: mode('white', 'gray.800')(props),
        color: mode('gray.800', 'whiteAlpha.900')(props),
      },
    }),
  },
});

useSystemColorMode: true позволяет автоматически определять цветовую схему по настройкам операционной системы.

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

Chakra UI полностью совместим с TypeScript. Для корректной типизации темы рекомендуется создавать файл с расширением .ts и использовать тип ChakraTheme:

import { extendTheme, ChakraTheme } from '@chakra-ui/react';

const theme: ChakraTheme = extendTheme({
  colors: { brand: { 500: '#1a38ff' } },
});

export default theme;

Типизация обеспечивает автодополнение и предотвращает ошибки при обращении к нестандартным палитрам или компонентам.

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

Оглавление