Theme components API

Chakra UI предоставляет мощный механизм кастомизации компонентов через Theme Components API, который позволяет централизованно управлять стилями, поведением и вариантами компонентов. Это значительно упрощает поддержание консистентного дизайна приложения и уменьшает дублирование кода.

Структура theme.components

Внутри темы Chakra UI все кастомизации компонентов хранятся в объекте theme.components. Каждый компонент представлен отдельным ключом, например:

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

const theme = extendTheme({
  components: {
    Button: {
      baseStyle: {},
      sizes: {},
      variants: {},
      defaultProps: {},
    },
    Input: {
      baseStyle: {},
      sizes: {},
      variants: {},
      defaultProps: {},
    },
  },
});

Ключи внутри компонента имеют строго определённое назначение:

  • baseStyle — базовые стили компонента, применяемые ко всем экземплярам.
  • sizes — варианты размеров (например, sm, md, lg), влияющие на padding, font-size, высоту и другие параметры.
  • variants — визуальные варианты компонента, например solid, outline, ghost.
  • defaultProps — стандартные пропсы, которые будут использоваться, если пользователь не передаст свои значения.

Base Style

baseStyle задаёт основу для всех экземпляров компонента. Здесь можно определять цвета, отступы, типографику и другие CSS-свойства.

Пример для кнопки:

Button: {
  baseStyle: {
    fontWeight: "bold",
    borderRadius: "md",
    _focus: {
      boxShadow: "outline",
    },
  },
}

Особенности:

  • Используются псевдоклассы Chakra UI (_hover, _active, _focus, _disabled) для описания интерактивного поведения.
  • BaseStyle может быть функцией, если требуется доступ к теме:
baseStyle: (props) => ({
  bg: props.colorMode === "dark" ? "gray.700" : "gray.100",
})

Sizes

Sizes позволяют стандартизировать размеры компонентов. Каждый размер определяет набор CSS-свойств, влияющих на элемент.

Пример для Button:

sizes: {
  sm: {
    fontSize: "sm",
    px: 3,
    py: 2,
  },
  md: {
    fontSize: "md",
    px: 4,
    py: 3,
  },
  lg: {
    fontSize: "lg",
    px: 6,
    py: 4,
  },
}

Особенности:

  • Размеры поддерживают все CSS-свойства, важные для компонента.
  • Можно использовать переменные темы (theme.space, theme.fontSizes) для консистентности.

Variants

Variants задают визуальные стили, отличные от базового. Они идеально подходят для создания разных визуальных состояний компонента без повторного кода.

Пример для Button:

variants: {
  solid: (props) => ({
    bg: props.colorScheme === "red" ? "red.500" : "blue.500",
    color: "white",
    _hover: {
      bg: props.colorScheme === "red" ? "red.600" : "blue.600",
    },
  }),
  outline: {
    border: "2px solid",
    borderColor: "currentColor",
  },
  ghost: {
    bg: "transparent",
    _hover: { bg: "gray.100" },
  },
}

Особенности:

  • Variants могут быть функциями для динамических стилей на основе props.
  • Можно комбинировать с sizes и baseStyle для максимальной гибкости.
  • Variants часто используются для цветовых схем (colorScheme).

Default Props

DefaultProps задают стандартные значения для компонента, такие как размер или вариант. Это позволяет не указывать их вручную при каждом использовании.

Пример:

defaultProps: {
  size: "md",
  variant: "solid",
  colorScheme: "blue",
}

Эффект:

  • Любой компонент Button без явного указания size или variant автоматически примет эти значения.
  • DefaultProps можно комбинировать с пользовательскими пропсами — переданные значения всегда имеют приоритет.

Применение Theme Components API на практике

  1. Централизованное управление стилями: все изменения внешнего вида компонентов происходят в одном месте (theme.components), что упрощает поддержку больших приложений.
  2. Повторное использование: создание новых variants или sizes позволяет переиспользовать стили без копирования CSS.
  3. Динамические стили: использование функций внутри baseStyle и variants даёт доступ к props и теме, обеспечивая адаптивность и поддержку colorMode.
  4. Совместимость с Chakra UI: полностью интегрировано с системой colorMode, spacing, typography и другими возможностями темы.

Пример комплексной кастомизации

const theme = extendTheme({
  components: {
    Button: {
      baseStyle: {
        fontWeight: "semibold",
        borderRadius: "full",
      },
      sizes: {
        xl: {
          fontSize: "xl",
          px: 8,
          py: 6,
        },
      },
      variants: {
        gradient: {
          bgGradient: "linear(to-r, teal.500, green.500)",
          color: "white",
          _hover: {
            bgGradient: "linear(to-r, teal.600, green.600)",
          },
        },
      },
      defaultProps: {
        size: "md",
        variant: "solid",
        colorScheme: "teal",
      },
    },
  },
});

В этом примере:

  • Создан новый размер xl с увеличенными отступами.
  • Добавлен вариант gradient с градиентной заливкой и hover-эффектом.
  • Заданы базовые стили и defaultProps, обеспечивающие консистентность.

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

Оглавление