Компонент Typography и его варианты

Компонент Typography в MUI служит для отображения текстового контента с соблюдением единой системы стилей. Он абстрагирует CSS-свойства, такие как font-size, font-weight, line-height и letter-spacing, предоставляя готовые варианты для заголовков, параграфов и вспомогательного текста. Основная цель компонента — обеспечить визуальную консистентность и соответствие Material Design без ручной настройки стилей для каждого элемента текста.

Синтаксис базового использования:

import Typography from '@mui/material/Typography';

<Typography variant="h1">Заголовок первого уровня</Typography>
  • variant — определяет типографический стиль (например, h1, body1, subtitle1).
  • component — позволяет задать HTML-элемент, отличающийся от стандартного для выбранного варианта (Typography по умолчанию рендерит заголовки h1-h6 или p).
  • align — управляет выравниванием текста (inherit, left, center, right, justify).
  • color — цвет текста, может быть задан через ключи темы (primary, secondary, textPrimary, textSecondary).
  • gutterBottom — добавляет нижний отступ, полезно для разметки текстовых блоков.
  • noWrap — предотвращает перенос текста, используется для длинных строк, которые должны оставаться в одну линию.

Варианты Typography

MUI предоставляет следующие основные варианты:

  • h1–h6 — заголовки разного уровня. Отличаются размером и толщиной шрифта.
  • subtitle1, subtitle2 — подзаголовки, часто используются для поясняющих текстов под заголовком.
  • body1, body2 — основной текст, различающийся размером и интервалами между строками.
  • caption — подписи, небольшие тексты под изображениями или элементами интерфейса.
  • overline — текст в верхнем регистре, используется для акцентирования категорий или меток.
  • button — текст кнопок, автоматически применяет все типографические настройки для кнопок.

Пример использования нескольких вариантов:

<Typography variant="h4" gutterBottom>
  Раздел
</Typography>
<Typography variant="body1" color="textSecondary">
  Основной текст статьи с пояснениями и дополнительной информацией.
</Typography>
<Typography variant="caption" display="block" gutterBottom>
  Примечание к тексту
</Typography>

Настройка Typography через тему

MUI позволяет глобально управлять стилями текста через объект theme. Это особенно важно для крупных проектов, где требуется единый стиль типографики.

Пример изменения темы:

import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  typography: {
    h1: {
      fontSize: '3rem',
      fontWeight: 700,
      letterSpacing: '-0.01562em',
    },
    body1: {
      fontSize: '1rem',
      lineHeight: 1.5,
    },
    button: {
      textTransform: 'uppercase',
    },
  },
});

<ThemeProvider theme={theme}>
  <Typography variant="h1">Кастомный заголовок</Typography>
</ThemeProvider>
  • fontSize — размер шрифта, можно задавать в rem, px или em.
  • fontWeight — толщина текста (400 обычная, 500 полужирная, 700 жирная).
  • letterSpacing — интервал между символами.
  • textTransform — трансформация текста (uppercase, lowercase, capitalize).

Комбинирование вариантов и компонентов

Typography позволяет гибко сочетать типографические варианты с HTML-компонентами для семантической разметки:

<Typography variant="h6" component="h2">
  Заголовок секции
</Typography>
<Typography variant="body2" component="span" color="primary">
  Встроенный текст
</Typography>
  • component не обязательно совпадает с variant. Например, визуально текст может быть как h1, но на уровне HTML это p для правильной семантики.
  • Поддерживается использование sx и styled для локальной кастомизации:
<Typography
  variant="subtitle1"
  sx={{ color: 'secondary.main', fontStyle: 'italic' }}
>
  Стилизованный подзаголовок
</Typography>

Управление адаптивностью текста

Typography интегрируется с медиазапросами и позволяет делать текст адаптивным через систему темы:

const theme = createTheme({
  typography: {
    h2: {
      fontSize: '2rem',
      '@media (min-width:600px)': {
        fontSize: '2.5rem',
      },
      '@media (min-width:960px)': {
        fontSize: '3rem',
      },
    },
  },
});
  • Использование медиазапросов в теме обеспечивает масштабирование текста под разные размеры экранов без дублирования стилей.

Вспомогательные свойства

  • display — блок или строчный элемент (block, inline, inline-block).
  • paragraph — автоматически добавляет нижний отступ, имитируя <p>.
  • noWrap — предотвращает перенос, текст будет обрезаться с многоточием, если не помещается.

Пример:

<Typography noWrap variant="body1">
  Очень длинный текст, который не должен переноситься на новую строку
</Typography>

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

Оглавление