Типографические утилиты

Chakra UI предоставляет мощные типографические утилиты для быстрого и гибкого оформления текста в приложениях на React. Все компоненты построены на системе стилизованных компонентов, которая использует theme-based подход, что позволяет легко управлять шрифтами, размерами, интервалами и цветами текста через единый объект темы.

Компоненты для текста

  1. Text Основной компонент для отображения параграфов, описаний и любых фрагментов текста. Поддерживает все базовые свойства типографики:
import { Text } from "@chakra-ui/react";

<Text fontSize="lg" fontWeight="semibold" color="gray.700">
  Пример текста с крупным шрифтом и полужирным начертанием
</Text>
  • fontSize – задаёт размер текста. Поддерживаются единицы sm, md, lg, xl и числовые значения (например, 20px).
  • fontWeight – регулирует толщину шрифта: normal, medium, semibold, bold.
  • color – цвет текста, который можно определить через тему (gray.700, blue.500) или CSS-значение.
  1. Heading Компонент для заголовков всех уровней. Использует семантику HTML (h1–h6) и адаптируется к теме:
import { Heading } from "@chakra-ui/react";

<Heading as="h2" size="xl" mb={4}>
  Основной заголовок
</Heading>
  • as – задаёт HTML-элемент (h1, h2, h3 и т.д.).
  • size – визуальный размер заголовка: xs, sm, md, lg, xl, 2xl, 3xl.
  • mb, mt – внешние отступы, которые применяются через систему spacing Chakra UI.

Управление интервалами и выравниванием

  • lineHeight – высота строки, может быть числом (1.5) или ключом из темы (short, base, tall).
  • letterSpacing – расстояние между буквами (tight, wide, widest).
  • textAlign – выравнивание текста (left, center, right, justify).
  • noOfLines – ограничивает количество строк текста с автоматическим обрезанием и добавлением многоточия:
<Text noOfLines={2}>
  Этот текст будет обрезан, если превысит две строки, добавляя многоточие
</Text>

Работа с цветом и контрастностью

Chakra UI использует цветовую палитру, определённую в теме. Для текста часто применяются следующие свойства:

  • color – основной цвет текста.
  • textDecoration – подчеркивание или перечеркивание (underline, line-through).
  • opacity – прозрачность текста (0.5, 0.8).

Пример:

<Text color="red.500" textDecoration="underline" opacity={0.8}>
  Важное уведомление
</Text>

Системные шрифты и кастомные

В теме Chakra UI задаются семейства шрифтов через объект theme.fonts. Можно использовать системные или подключенные кастомные шрифты:

// theme.js
const theme = extendTheme({
  fonts: {
    heading: "'Roboto', sans-serif",
    body: "'Open Sans', sans-serif",
    mono: "Menlo, monospace",
  },
});

Применение в компоненте:

<Heading fontFamily="heading">Заголовок с шрифтом Roboto</Heading>
<Text fontFamily="body">Обычный текст с Open Sans</Text>

Типографические утилиты для адаптивности

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

<Text fontSize={["sm", "md", "lg", "xl"]}>
  Адаптивный текст для разных экранов
</Text>
  • Массив значений соответствует брейкпоинтам: [base, sm, md, lg].
  • Можно комбинировать fontSize, lineHeight, letterSpacing и textAlign для полной адаптивной типографики.

Стилизация через sx и cssProps

Для сложных сценариев, где стандартных пропсов недостаточно, можно использовать sx или css:

<Text
  sx={{
    textTransform: "uppercase",
    textShadow: "1px 1px 2px gray",
  }}
>
  Стильный текст
</Text>
  • textTransform – преобразование регистра (uppercase, lowercase, capitalize).
  • textShadow – тень текста.
  • Любые CSS-свойства могут быть переданы через sx, что позволяет полностью контролировать визуализацию.

Компоненты для списков и цитат

Chakra UI предоставляет дополнительные компоненты для типографически насыщенного контента:

  • List, ListItem, OrderedList, UnorderedList для маркированных и нумерованных списков.
  • Blockquote для цитат с дополнительной стилизацией:
import { List, ListItem, UnorderedList, Box } from "@chakra-ui/react";

<UnorderedList spacing={3}>
  <ListItem>Первый элемент</ListItem>
  <ListItem>Второй элемент</ListItem>
</UnorderedList>

<Box as="blockquote" borderLeft="4px solid gray" pl={4} color="gray.600">
  Цитата с визуальным выделением
</Box>
  • spacing – вертикальный интервал между элементами списка.
  • borderLeft и pl – создают визуальный стиль для цитаты, типичный для публикаций.

Использование сочетаний и миксинов

Часто применяются миксины, объединяющие несколько типографических свойств:

const headingStyle = {
  fontWeight: "bold",
  textTransform: "uppercase",
  letterSpacing: "wide",
  color: "blue.600",
};

<Heading sx={headingStyle}>Заголовок с миксином</Heading>
  • Позволяет стандартизировать стиль заголовков или блоков текста по всему приложению.

Итоговая структура типографики

  • Text – основной блок текста.
  • Heading – заголовки всех уровней.
  • List / ListItem – списки.
  • Box / Blockquote – цитаты и особые текстовые блоки.
  • Responsive props и sx – гибкая настройка для адаптивности и сложной стилизации.

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

Оглавление