Псевдоклассы и псевдоэлементы

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

Псевдоклассы

Псевдоклассы используются для изменения стилей элементов в зависимости от их состояния: наведения, фокуса, активности и других взаимодействий. В Chakra UI они задаются через объект pseudo, либо напрямую через сокращённые пропсы (_hover, _focus, _active и т.д.).

Примеры псевдоклассов:

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

<Button
  bg="blue.500"
  color="white"
  _hover={{ bg: "blue.600" }}
  _active={{ bg: "blue.700" }}
  _focus={{ boxShadow: "outline" }}
>
  Кнопка
</Button>
  • _hover – стили при наведении мыши.
  • _active – стили при активном состоянии (например, нажатие кнопки).
  • _focus – стили при получении фокуса (важно для accessibility).
  • _disabled – стили для заблокированных элементов.
  • _checked – для элементов с состоянием выбора (checkbox, radio).
  • _expanded – для раскрытых компонентов, таких как Accordion.

Можно комбинировать несколько псевдоклассов:

<Button
  bg="green.400"
  _hover={{ bg: "green.500" }}
  _active={{ bg: "green.600" }}
  _focus={{ boxShadow: "0 0 0 3px rgba(72,187,120,0.6)" }}
>
  Подтвердить
</Button>

Использование объекта pseudo

Для более структурированного подхода Chakra UI поддерживает объект pseudo:

<Box
  bg="gray.100"
  pseudo={{
    _hover: { bg: "gray.200" },
    _focus: { borderColor: "blue.400" },
  }}
  p={4}
>
  Контейнер
</Box>

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

Псевдоэлементы

Псевдоэлементы создают новые виртуальные элементы, которые не находятся в DOM, но позволяют добавлять декоративные или функциональные визуальные элементы. В Chakra UI псевдоэлементы задаются через _before и _after.

Пример добавления декоративного элемента:

<Box
  position="relative"
  _before={{
    content: '""',
    position: "absolute",
    top: "-10px",
    left: "-10px",
    width: "20px",
    height: "20px",
    bg: "red.500",
    borderRadius: "full",
  }}
  p={6}
  bg="gray.50"
>
  Блок с псевдоэлементом
</Box>
  • content – обязательное свойство для псевдоэлемента. В Chakra UI задаётся как строка, например "" для декоративных целей.
  • _before – вставляется перед содержимым элемента.
  • _after – вставляется после содержимого элемента.
  • Можно применять любые CSS свойства: позиционирование, цвета, размеры, трансформации.

Комбинирование псевдоклассов и псевдоэлементов:

<Button
  position="relative"
  _hover={{
    _after: {
      content: '""',
      position: "absolute",
      inset: 0,
      bg: "rgba(0,0,0,0.1)",
    },
  }}
>
  Наведи на меня
</Button>

В этом примере при наведении на кнопку создаётся полупрозрачный оверлей с помощью псевдоэлемента _after.

Стилизация вложенных элементов через псевдоклассы

Для компонентов Chakra UI, содержащих вложенные элементы, можно использовать селекторы вида & > * через sx или css пропсы. Например:

<Box
  sx={{
    "&:hover > svg": { fill: "blue.500" },
  }}
>
  <Icon viewBox="0 0 24 24">
    <path d="M12 2L15 8H9L12 2Z" />
  </Icon>
</Box>

Здесь при наведении на контейнер Box меняется цвет вложенного SVG.

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

Chakra UI позволяет удобно управлять состояниями форм:

<Input
  placeholder="Введите текст"
  _placeholder={{ color: "gray.400" }}
  _hover={{ borderColor: "blue.300" }}
  _focus={{ borderColor: "blue.500", boxShadow: "outline" }}
  _disabled={{ bg: "gray.100" }}
/>
  • _placeholder – стили для текста-заполнителя.
  • _invalid – стили для невалидного состояния поля.
  • _readOnly – стили для поля только для чтения.

Анимации и переходы через псевдоклассы

Псевдоклассы отлично сочетаются с CSS-транзишнами:

<Box
  bg="pink.300"
  w="100px"
  h="100px"
  transition="all 0.3s ease"
  _hover={{ transform: "scale(1.1)", bg: "pink.500" }}
/>

Использование transition позволяет создать плавное изменение состояния при наведении или активации.

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

Оглавление