Сокращенные записи свойств

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

Основные категории сокращений

1. Отступы

Система отступов в Chakra UI реализована через следующие сокращенные пропсы:

  • m — общий маргин (margin)
  • mt, mr, mb, ml — маргин сверху, справа, снизу, слева
  • mx — горизонтальные отступы (ml и mr)
  • my — вертикальные отступы (mt и mb)
  • p — общий паддинг (padding)
  • pt, pr, pb, pl — паддинги по сторонам
  • px — горизонтальные паддинги (pl и pr)
  • py — вертикальные паддинги (pt и pb)

Пример:

<Box m={4} p={2} mx={6} py={3}>
  Контент с отступами
</Box>

Здесь mx={6} задаёт левый и правый маргин одновременно, а py={3} — верхний и нижний паддинг.

2. Размеры и ширина/высота

  • w или width — ширина
  • h или height — высота
  • minW, maxW — минимальная и максимальная ширина
  • minH, maxH — минимальная и максимальная высота
  • boxSize — одновременно ширина и высота элемента

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

<Image boxSize="100px" src="avatar.png" alt="Аватар" />

boxSize автоматически задаёт и width, и height для элемента, упрощая запись.

3. Цвета и фоны

Сокращения позволяют быстро управлять цветами текста, фона и границ:

  • color — цвет текста
  • bg — цвет фона (backgroundColor)
  • bgGradient — градиент фона
  • borderColor — цвет границы
  • borderWidth — ширина границы
  • borderRadius или rounded — скругление углов
  • roundedTop, roundedBottom, roundedLeft, roundedRight — частичное скругление

Пример:

<Box bg="teal.500" color="white" rounded="md" p={4}>
  Кнопка с фоном и скруглением
</Box>

Здесь rounded="md" задаёт скругление углов по всей коробке. Chakra поддерживает ключевые размеры sm, md, lg, xl для быстрого выбора.

4. Гибкость элементов

Для работы с Flexbox и Grid предусмотрены сокращения, позволяющие управлять выравниванием и расположением элементов:

  • d или display — тип отображения (flex, grid, block, inline-block)
  • flexDir — направление flex (row, column)
  • justify или justifyContent — выравнивание по основной оси
  • align или alignItems — выравнивание по перекрестной оси
  • gap — расстояние между элементами
  • rowGap, columnGap — отдельные интервалы для строк и столбцов

Пример Flex:

<Flex d="flex" flexDir="column" align="center" gap={4}>
  <Box bg="blue.200" w="50px" h="50px" />
  <Box bg="red.200" w="50px" h="50px" />
</Flex>

Сокращения d, flexDir и gap позволяют создавать аккуратные структуры без лишнего CSS.

5. Типография

Chakra UI предоставляет сокращенные пропсы для текста:

  • fontSize — размер шрифта
  • fontWeight — толщина шрифта
  • lineHeight — высота строки
  • letterSpacing — межбуквенный интервал
  • textAlign — выравнивание текста
  • noOfLines — ограничение количества строк с автоматическим усечением

Пример:

<Text fontSize="lg" fontWeight="bold" lineHeight="short" textAlign="center" noOfLines={2}>
  Это пример текста с сокращёнными пропсами для типографии.
</Text>

noOfLines={2} автоматически добавляет многоточие при превышении двух строк.

6. Трансформации и эффекты

Сокращения для визуальных эффектов и взаимодействий:

  • shadow — тень элемента (boxShadow)
  • opacity — прозрачность
  • transition — CSS-переходы
  • transform — трансформации (rotate, scale, translate)
  • cursor — стиль курсора

Пример кнопки с эффектом при наведении:

<Button bg="purple.500" color="white" shadow="md" _hover={{ bg: "purple.600", shadow: "lg" }}>
  Наведи на меня
</Button>

Использование _hover вместе с сокращенными пропсами делает код компактным и понятным.

Преимущества сокращенных пропсов

  1. Компактность кода — меньше строк, проще читать.
  2. Консистентность — единый подход к стилям через Chakra-тему.
  3. Сокращение повторений — один проп управляет сразу несколькими CSS-свойствами.
  4. Легкая адаптация под тему — значения могут ссылаться на theme, например bg="gray.200".

Рекомендации по использованию

  • Предпочтительно применять сокращенные пропсы для простых стилей, чтобы не перегружать JSX.
  • Для сложных комбинаций или медиа-запросов лучше использовать объектные пропсы или sx.
  • Сокращения хорошо работают совместно с темой Chakra, поддерживая цветовую и размерную консистентность.

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

Оглавление