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

Chakra UI предоставляет гибкий способ стилизации компонентов через проп sx. Этот проп позволяет напрямую передавать объект стилей в компонент, обеспечивая тонкий контроль над внешним видом без необходимости создания отдельного файла стилей или использования styled-components. Проп sx работает с тем же синтаксисом, что и theme Chakra UI, включая responsive-значения и псевдоклассы.

Основы использования sx prop

Проп sx принимает объект JavaScript, где ключи соответствуют CSS-свойствам, а значения — допустимые CSS-значения или ссылки на токены темы. Например:

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

function Example() {
  return (
    <Box
      sx={{
        bg: "teal.500",
        color: "white",
        p: 4,
        borderRadius: "md",
      }}
    >
      Контент с использованием sx
    </Box>
  );
}

Разбор кода:

  • bg: "teal.500" — фон элемента, использует токен темы.
  • color: "white" — цвет текста.
  • p: 4 — внутренний отступ (padding), интерпретируемый через шкалу темы.
  • borderRadius: "md" — скругление углов, также через тему.

Таким образом, sx позволяет писать компактные и консистентные стили, полностью интегрированные с дизайном темы.

Responsive-стили через sx

sx поддерживает адаптивные стили с помощью массивов или объектов. Это позволяет задавать разные значения для различных брейкпоинтов темы.

<Box
  sx={{
    fontSize: ["sm", "md", "lg"],
    px: { base: 2, md: 4, lg: 6 },
    bg: { base: "red.100", md: "green.100", lg: "blue.100" },
  }}
>
  Адаптивный блок
</Box>
  • fontSize: ["sm", "md", "lg"] — массив значений по брейкпоинтам base, sm, md и так далее.
  • px и bg используют объектную запись для явного задания значений на разных брейкпоинтах.
  • sx автоматически применяет нужные стили в зависимости от ширины экрана.

Псевдоклассы и состояния

Через sx можно задавать стили для псевдоклассов (:hover, :focus, :active) и состояний:

<Button
  sx={{
    bg: "blue.500",
    color: "white",
    _hover: { bg: "blue.600" },
    _active: { bg: "blue.700" },
    _focus: { boxShadow: "outline" },
  }}
>
  Кнопка с состояниями
</Button>
  • _hover, _active, _focus — специальные ключи Chakra UI для псевдоклассов.
  • Можно комбинировать несколько состояний одновременно, создавая богатые интерактивные элементы без CSS-файлов.

Составные компоненты и sx

sx работает со всеми компонентами Chakra UI, включая составные (Flex, Grid, Stack). Это особенно полезно при построении сложных макетов:

<Flex
  sx={{
    direction: { base: "column", md: "row" },
    align: "center",
    justify: "space-between",
    gap: 4,
  }}
>
  <Box sx={{ flex: 1, bg: "gray.100", p: 3 }}>Левая колонка</Box>
  <Box sx={{ flex: 2, bg: "gray.200", p: 3 }}>Правая колонка</Box>
</Flex>
  • direction использует responsive-значения.
  • gap задаёт промежуток между дочерними элементами.
  • sx объединяет стили макета и визуальные свойства в одном объекте.

Плюсы использования sx

  • Локальные стили без лишних файлов: все стили хранятся рядом с компонентом.
  • Тема и токены: автоматически учитываются цвета, размеры и отступы темы.
  • Поддержка responsive и псевдоклассов: позволяет создавать адаптивные интерактивные компоненты.
  • Чистый и компактный код: не требуется писать отдельные CSS или styled-компоненты.

Рекомендации по применению

  • Использовать sx для локальных изменений стиля, когда не требуется переиспользуемый компонент.
  • Для повторяющихся стилей или глобальных тем лучше создавать variant или styleConfig.
  • Комбинировать с другими пропсами Chakra UI (bg, color, p), но избегать дублирования свойств между ними, чтобы не возникало конфликтов.
  • При сложных макетах использовать объектные responsive-значения, чтобы код оставался читаемым и масштабируемым.

Совместное использование с css и emotion

Chakra UI основан на Emotion, поэтому sx можно использовать вместе с пропом css:

<Box
  sx={{ bg: "purple.500", color: "white", p: 4 }}
  css={{ border: "2px solid black" }}
>
  Комбинация sx и css
</Box>
  • sx обрабатывает тему и responsive.
  • css позволяет добавлять кастомные CSS-свойства, не представленные в теме.

Sx prop является мощным инструментом для быстрого, точного и гибкого управления стилями в Chakra UI, объединяя преимущества темы, responsive-дизайна и псевдоклассов в одном объекте.

Оглавление