Работа с заголовками

Основные компоненты для заголовков

В MUI (Material-UI) для отображения текстовых заголовков используется компонент Typography. Этот компонент обеспечивает единый подход к стилям текста, соответствующий Material Design. Основные варианты заголовков представлены свойством variant, которое определяет визуальный уровень заголовка:

  • h1 — основной крупный заголовок страницы.
  • h2 — заголовок второго уровня, используется для выделения крупных блоков контента.
  • h3 — заголовок среднего уровня, часто применяется внутри секций.
  • h4, h5, h6 — заголовки меньших уровней, подходящие для подразделов и акцентных элементов.

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

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

<Typography variant="h1">Главный заголовок</Typography>
<Typography variant="h2">Заголовок второго уровня</Typography>
<Typography variant="h3">Заголовок третьего уровня</Typography>

Настройка HTML-тега

Свойство component позволяет задавать конкретный HTML-тег, независимо от визуального стиля. Это особенно важно для семантики и SEO:

<Typography variant="h2" component="h1">
  Визуально h2, но HTML-тег h1
</Typography>

В этом примере заголовок будет выглядеть как h2 визуально, но в HTML-документе будет использоваться тег h1.

Управление цветом заголовка

Для изменения цвета текста используется свойство color. В MUI доступны стандартные цветовые палитры:

<Typography variant="h3" color="primary">
  Синий заголовок
</Typography>
<Typography variant="h4" color="textSecondary">
  Серый заголовок
</Typography>

Также можно применять пользовательские цвета через объект sx:

<Typography variant="h5" sx={{ color: '#ff5722' }}>
  Оранжевый заголовок
</Typography>

Выравнивание и перенос текста

Свойство align задает выравнивание текста: left, center, right, justify. Для контроля переноса используется CSS-свойство noWrap:

<Typography variant="h6" align="center" noWrap>
  Центрированный заголовок без переноса
</Typography>

Интервал и отступы

Компонент Typography позволяет управлять интервалами через систему MUI и свойство gutterBottom, которое добавляет нижний отступ, соответствующий типографическим стандартам Material Design:

<Typography variant="h2" gutterBottom>
  Заголовок с нижним отступом
</Typography>

Для более гибкой настройки используют sx:

<Typography variant="h4" sx={{ marginTop: 3, marginBottom: 2 }}>
  Заголовок с индивидуальными отступами
</Typography>

Адаптивность заголовков

Для обеспечения адаптивного дизайна MUI поддерживает свойство variantMapping, которое позволяет переопределять соответствие уровня заголовка HTML-тегам в зависимости от контекста:

<Typography variant="h3" variantMapping={{ h3: 'h2' }}>
  Заголовок h3 визуально, но HTML-тег h2
</Typography>

Для изменения размеров текста в зависимости от ширины экрана применяют системные функции theme.breakpoints:

import { useTheme } from '@mui/material/styles';

const theme = useTheme();

<Typography
  variant="h2"
  sx={{
    fontSize: { xs: '1.5rem', sm: '2rem', md: '3rem' },
  }}
>
  Адаптивный заголовок
</Typography>

Пользовательские стили заголовков

MUI позволяет создавать полностью кастомизированные заголовки через styled или sx. Пример с styled:

import { styled } from '@mui/material/styles';
import Typography from '@mui/material/Typography';

const CustomHeader = styled(Typography)(({ theme }) => ({
  color: theme.palette.secondary.main,
  fontWeight: 700,
  textTransform: 'uppercase',
  letterSpacing: '0.1em',
}));

<CustomHeader variant="h3">Кастомизированный заголовок</CustomHeader>

Итоговые рекомендации по работе с заголовками

  • Использовать Typography для всех заголовков для единообразного стиля.
  • Разделять визуальный стиль (variant) и HTML-тег (component) для семантики.
  • Контролировать цвет, отступы и выравнивание через color, gutterBottom и sx.
  • Применять адаптивные размеры с использованием sx и theme.breakpoints.
  • Для сложной кастомизации создавать стилизованные компоненты через styled или систему sx.

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

Оглавление