Наследование стилей

В Chakra UI наследование стилей строится на принципах тематической системы (theme system) и пропсов компонентов, что позволяет создавать консистентные интерфейсы без дублирования кода. Основным механизмом наследования является композиция компонентов и использование стилей через тему.

Тема и глобальные стили

Тема в Chakra UI задается через объект extendTheme и позволяет определить базовые параметры: цвета, типографику, размеры, отступы, радиусы и шрифты. Пример:

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

const theme = extendTheme({
  colors: {
    brand: {
      100: "#f7caca",
      500: "#e53e3e",
      900: "#742a2a",
    },
  },
  fonts: {
    heading: "Arial, sans-serif",
    body: "Roboto, sans-serif",
  },
});

Все компоненты Chakra UI могут наследовать эти значения автоматически, если не указаны кастомные пропсы. Например, если задать цвет текста через color="brand.500", он возьмется из темы.

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

В Chakra UI часто используется композиция компонентов. При вложении компонентов внутренний компонент может наследовать стили родителя, если используются специальные пропсы inherit или если пропсы не переопределяются.

Пример:

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

<Box bg="gray.100" p={4}>
  <Text fontSize="lg" color="inherit">
    Этот текст унаследует цвет от родителя
  </Text>
</Box>

Здесь color="inherit" заставляет Text использовать цвет, установленный в Box. Это особенно полезно для создания универсальных контейнеров, где внутренние элементы автоматически подстраиваются под стили родителя.

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

Chakra UI использует семейства компонентов (component variants), что позволяет создавать единый стиль для группы элементов. Например, кнопки могут наследовать общие пропсы через Button и его variants:

const theme = extendTheme({
  components: {
    Button: {
      baseStyle: {
        fontWeight: "bold",
        borderRadius: "md",
      },
      variants: {
        solid: {
          bg: "brand.500",
          color: "white",
        },
        outline: {
          border: "2px solid",
          borderColor: "brand.500",
        },
      },
    },
  },
});

Использование variant позволяет наследовать базовые стили, при этом переопределяя отдельные свойства.

<Button variant="solid">Солидная кнопка</Button>
<Button variant="outline">Обводка</Button>

Проп `sx` и локальное переопределение

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

<Box bg="blue.100" p={4} sx={{ border: "1px solid black", borderRadius: "8px" }}>
  Стили из `sx` добавляются поверх наследуемых
</Box>

Важно понимать, что sx имеет приоритет над стандартными пропсами, но внутри вложенных компонентов наследование работает стандартным образом.

Цвета и прозрачность

Chakra UI позволяет использовать наследование цвета через CSS-переменные, встроенные в тему. Например, прозрачность можно задавать через alpha:

<Box bg="brand.500" color="whiteAlpha.900">
  Наследуемые оттенки белого с прозрачностью
</Box>

Внутренние компоненты автоматически унаследуют контрастный цвет текста, если задано color="inherit".

Наследование при динамическом изменении темы

Chakra UI поддерживает цветовые режимы (color modes) — светлый и тёмный. При использовании useColorModeValue, компоненты наследуют стили в зависимости от текущего режима:

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

const bg = useColorModeValue("white", "gray.800");
const color = useColorModeValue("black", "white");

<Box bg={bg} color={color}>
  Контент автоматически адаптируется к цветовой схеме
</Box>

Это упрощает наследование, так как вложенные компоненты могут использовать те же переменные или inherit.