Переопределение стилей компонентов

Chakra UI предоставляет мощный и гибкий механизм для переопределения стилей компонентов, позволяя настраивать внешний вид элементов на уровне темы или непосредственно при использовании компонента. Основные подходы включают использование props компонентов, тематических настроек (theme overrides) и функций стилизации с sx или styleConfig.

Использование style props

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

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

<Button
  colorScheme="teal"
  size="lg"
  borderRadius="md"
  boxShadow="md"
>
  Нажми меня
</Button>

Ключевые моменты:

  • colorScheme задаёт базовую цветовую палитру компонента.
  • size регулирует размер (padding, fontSize и height).
  • borderRadius, boxShadow и другие style props позволяют тонко настраивать внешний вид.
  • Использование style props не требует глобальных изменений темы и действует локально на конкретный компонент.

Переопределение темы через extendTheme

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

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

const theme = extendTheme({
  components: {
    Button: {
      baseStyle: {
        fontWeight: "bold",
        textTransform: "uppercase",
      },
      sizes: {
        xl: {
          h: "60px",
          fontSize: "lg",
          px: "32px",
        },
      },
      variants: {
        solid: {
          bg: "blue.500",
          color: "white",
          _hover: {
            bg: "blue.600",
          },
        },
      },
    },
  },
});

export default theme;

Основные уровни переопределения:

  • baseStyle – базовые стили для всех экземпляров компонента.
  • sizes – определение размеров (height, padding, fontSize) для sm, md, lg, или кастомных.
  • variants – различные визуальные варианты компонента (например, solid, outline).
  • _hover, _active, _focus – псевдоклассы для интерактивного поведения.

Использование variants и sizes

variants позволяют создавать визуально различающиеся версии одного компонента без дублирования кода. Это особенно полезно для поддержания консистентного дизайна в проекте:

<Button variant="outline" size="lg">
  Отменить
</Button>
<Button variant="solid" size="xl">
  Подтвердить
</Button>

Можно создать собственные варианты через тему:

variants: {
  ghostRed: {
    bg: "red.100",
    color: "red.700",
    _hover: { bg: "red.200" },
  },
}

После этого variant="ghostRed" будет доступен для использования на всех кнопках.

Функциональные стили с styleConfig

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

const ButtonConfig = {
  variants: {
    dynamic: (props) => ({
      bg: props.colorMode === "dark" ? "gray.700" : "gray.200",
      color: props.colorMode === "dark" ? "white" : "black",
    }),
  },
};

const theme = extendTheme({
  components: {
    Button: ButtonConfig,
  },
});

Преимущество подхода в том, что стили адаптируются к props и состоянию приложения, например colorMode или isDisabled.

Переопределение отдельных компонентов с chakra()

Chakra UI предоставляет утилиту chakra(), позволяющую расширять любой компонент и переопределять его стили на уровне конкретного элемента:

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

const CustomHeading = chakra("h1", {
  baseStyle: {
    fontWeight: "extrabold",
    letterSpacing: "wider",
    color: "purple.600",
  },
});

<CustomHeading fontSize="4xl">Заголовок</CustomHeading>

Особенности подхода:

  • Можно комбинировать стандартные props и собственные стили.
  • Поддерживается переопределение baseStyle, псевдоклассов и responsive props.

Локальные стили через sx prop

Если требуется изменить несколько CSS-свойств локально, можно использовать sx:

<Box
  sx={{
    bg: "orange.100",
    borderRadius: "lg",
    padding: "24px",
    _hover: { bg: "orange.200" },
  }}
>
  Содержимое блока
</Box>

Преимущества sx:

  • Полный контроль CSS на уровне отдельного компонента.
  • Совместимость с темой и цветовыми токенами Chakra.
  • Легко комбинируется с style props.

Важные рекомендации

  • Использовать style props для мелких изменений и быстрого прототипирования.
  • Для глобального управления визуальным стилем компонентов применять theme overrides.
  • Сложные динамические стили лучше реализовывать через функциональные конфигурации styleConfig.
  • chakra() и sx подходят для переопределений на уровне отдельных экземпляров компонента или кастомных элементов.

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

Оглавление