Использование breakpoints

Chakra UI предоставляет мощный инструмент для создания адаптивных интерфейсов через breakpoints — точки, при которых поведение компонентов меняется в зависимости от ширины экрана. В библиотеке breakpoints задаются в объекте темы и позволяют управлять стилями компонентов через responsive props.

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

const theme = extendTheme({
  breakpoints: {
    sm: "30em", // 480px
    md: "48em", // 768px
    lg: "62em", // 992px
    xl: "80em", // 1280px
    "2xl": "96em", // 1536px
  },
});

export default theme;

Здесь ключи (sm, md, lg, xl, 2xl) используются для задания адаптивных свойств компонентов. Единицы измерения в Chakra UI рекомендуются в em, что обеспечивает корректное масштабирование при изменении базового размера шрифта.

Responsive Props

Chakra UI поддерживает несколько форматов задания значений для responsive props:

  1. Массив – значения задаются по порядку от меньших экранов к большим:
<Box width={["100%", "75%", "50%", "25%"]} bg="teal.500">
  Контент
</Box>
  • "100%" применяется для экранов меньше sm
  • "75%" для sm
  • "50%" для md
  • "25%" для lg и выше
  1. Объект – более читаемый способ, где явно указываются ключи breakpoints:
<Box
  width={{
    base: "100%", // по умолчанию
    sm: "75%",
    md: "50%",
    lg: "25%",
  }}
  bg="purple.400"
>
  Контент
</Box>
  • base применяется для всех экранов, если не указан конкретный breakpoint
  • Остальные ключи (sm, md, lg) переопределяют значение при достижении соответствующего размера

Преимущество объекта в том, что можно пропустить промежуточные breakpoints и задать только те, которые нужны.

Использование breakpoints в стилях компонента

Помимо responsive props, breakpoints можно использовать в функциях темы или стилизованных компонентах через useBreakpointValue:

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

function ResponsiveBox() {
  const size = useBreakpointValue({ base: "100%", md: "50%" });

  return <Box width={size} bg="blue.300">Контент</Box>;
}
  • useBreakpointValue возвращает значение, соответствующее текущей ширине экрана
  • Удобно использовать, когда требуется логика, зависящая от размеров экрана, например, вычисления отступов, видимость элементов или размеры компонентов

Breakpoints в Flex и Grid

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

<Flex
  direction={{ base: "column", md: "row" }}
  gap={{ base: 2, md: 6 }}
>
  <Box bg="red.200" p={4}>Блок 1</Box>
  <Box bg="green.200" p={4}>Блок 2</Box>
</Flex>
  • На маленьких экранах (base) блоки располагаются в колонку, на больших (md) – в ряд
  • gap изменяется аналогично, обеспечивая пропорциональные отступы

В Grid аналогично можно управлять количеством колонок:

<Grid
  templateColumns={{ base: "1fr", md: "repeat(2, 1fr)", lg: "repeat(4, 1fr)" }}
  gap={4}
>
  {Array.from({ length: 8 }).map((_, i) => (
    <Box key={i} bg="orange.300" p={4}>Элемент {i + 1}</Box>
  ))}
</Grid>
  • На мобильных экранах – одна колонка, на планшетах – две, на десктопах – четыре

Комбинирование breakpoints с псевдоклассами

Chakra UI позволяет комбинировать responsive props с псевдоклассами (_hover, _focus, _active):

<Button
  fontSize={{ base: "sm", md: "md" }}
  _hover={{ bg: { base: "teal.300", md: "teal.500" } }}
>
  Кнопка
</Button>
  • Шрифт кнопки и цвет при наведении меняются в зависимости от размера экрана
  • Полезно для создания динамичного и отзывчивого UI без медиа-запросов CSS

Breakpoints в глобальной теме

Можно использовать breakpoints не только для компонентов, но и для глобальных стилей темы:

const theme = extendTheme({
  breakpoints: { sm: "30em", md: "48em", lg: "62em", xl: "80em" },
  styles: {
    global: {
      body: {
        fontSize: { base: "14px", md: "16px", lg: "18px" },
      },
    },
  },
});
  • fontSize меняется автоматически при достижении соответствующего breakpoint
  • Позволяет создавать единый адаптивный дизайн для всего приложения

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

  • Использовать объект для responsive props, если требуется точная привязка к breakpoint
  • Применять useBreakpointValue, когда нужно программно получать значение и изменять логику
  • Для Flex и Grid обязательно планировать разметку под разные размеры экрана
  • В глобальной теме breakpoints помогают унифицировать адаптивность всего приложения

Эти возможности делают Chakra UI удобным инструментом для построения адаптивных интерфейсов без необходимости писать отдельные CSS медиа-запросы.

Оглавление