Debugging стилей

Chakra UI предоставляет набор компонентов с предопределёнными стилями и возможностью их тонкой настройки через пропсы и тему. Отладка стилей требует понимания структуры компонентов, тематических токенов и механизма передачи пропсов. Основная цель — выявление конфликтов стилей, переопределений и непредвиденного поведения в визуальном представлении компонентов.

Использование пропсов стилей

Каждый компонент Chakra UI поддерживает style props — короткие свойства, которые позволяют изменять внешний вид компонентов без написания CSS. Например:

<Box bg="blue.500" p={4} borderRadius="md">
  Контент
</Box>

Здесь bg, p и borderRadius — это shorthand props, которые автоматически переводятся в CSS свойства (background-color, padding, border-radius). При отладке важно проверить:

  • Совпадение названий токенов с темой (blue.500 существует в theme.colors?).
  • Порядок применения стилей: пропсы компонента имеют приоритет над стилями, заданными через sx или css.

Работа с системой темы

Chakra UI использует объект theme для управления глобальными стилями. Для диагностики стилей:

  1. Проверить, какие значения используются для цветов, размеров, отступов.
  2. Убедиться, что переопределение темы через extendTheme корректно.
  3. Использовать console.log(theme) для инспекции доступных токенов.

Пример:

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

const theme = extendTheme({
  colors: {
    brand: {
      100: "#f7caca",
      500: "#e53e3e",
    },
  },
});

Ошибки при отладке часто возникают, если указанный цвет или размер отсутствует в теме.

Инструменты для инспекции стилей

  1. React DevTools — позволяет увидеть текущие пропсы и их значения.
  2. Chakra UI DevTools — отдельное расширение для визуального анализа компонентов, отображающее активные стили, тематические токены и приоритет применения стилей.
  3. Селекторы CSS в браузере — помогают отследить, как стили, сгенерированные Chakra, влияют на DOM-элементы.

Отладка конфликта стилей

Частая ситуация — конфликт между пропсами, кастомными стилями и глобальными CSS. Алгоритм диагностики:

  1. Проверить порядок импорта стилей: глобальные CSS могут переопределять Chakra props.
  2. Использовать проп sx для локального переопределения:
<Button
  colorScheme="red"
  sx={{ backgroundColor: "green.500", _hover: { bg: "green.600" } }}
>
  Кнопка
</Button>

sx применяется поверх всех стандартных стилей компонента.

  1. Проверять псевдоклассы (_hover, _focus, _active) — часто проблемы связаны именно с ними.

Использование __css и css для низкоуровневой отладки

  • __css — внутреннее свойство компонента для базовых стилей. Может быть использовано при кастомизации компонентов через styled.
  • css — пропс, который позволяет напрямую передавать объект CSS с полным контролем приоритетов.

Пример:

<Box
  __css={{ display: "flex", alignItems: "center" }}
  css={{ gap: "16px" }}
>
  Элементы
</Box>

Здесь __css задаёт базовый стиль, css может его дополнять или переопределять.

Проверка адаптивных стилей

Chakra UI поддерживает responsive props, позволяющие задавать стили для разных размеров экранов:

<Box
  fontSize={["sm", "md", "lg"]}
  p={{ base: 2, md: 4, lg: 6 }}
>
  Адаптивный текст
</Box>

При отладке адаптивных стилей важно:

  • Проверять значения на каждом брейкпойнте.
  • Убедиться, что тема содержит правильные брейкпойнты (theme.breakpoints).
  • Использовать DevTools для эмуляции различных размеров экранов.

Логирование и временные стили

Для сложных ситуаций удобно временно добавлять отладочные стили, которые помогают визуально определить область проблем:

<Box border="2px dashed red" bg="yellow.50">
  Проблемный компонент
</Box>

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

Практика пошаговой диагностики

  1. Проверить правильность использования style props.
  2. Сравнить с текущей темой (theme).
  3. Использовать sx или css для локального контроля.
  4. Проверить псевдоклассы и адаптивные значения.
  5. Локализовать проблему визуально через временные границы (border, outline).
  6. Использовать DevTools для анализа конкретного DOM-узла и итогового CSS.

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

Оглавление