Текстовые утилиты и хелперы

MUI (Material-UI) предоставляет богатый набор компонентов и утилит для работы с текстом, обеспечивая единый стиль, адаптивность и гибкость интерфейсов. В основе работы с текстом лежит компонент Typography, а также дополнительные хелперы для стилизации, обрезки и управления переносами.

Компонент Typography

Компонент Typography используется для отображения текста с поддержкой Material Design. Он обеспечивает контроль над:

  • Вариантами текста (variant): h1, h2, h3, h4, h5, h6, subtitle1, subtitle2, body1, body2, caption, overline, button.

  • Выравниванием (align): inherit, left, center, right, justify.

  • Гибкостью стиля (noWrap, gutterBottom):

    • noWrap — предотвращает перенос текста, автоматически добавляя многоточие при переполнении.
    • gutterBottom — добавляет отступ снизу для визуального разделения блоков текста.

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

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

<Typography variant="h4" align="center" gutterBottom>
  Заголовок четвертого уровня
</Typography>

<Typography variant="body1" noWrap>
  Длинный текст, который не должен переноситься и будет обрезан с многоточием.
</Typography>

Хелперы для обрезки и управления переполнением

MUI предоставляет утилиты для контроля длинного текста через CSS-in-JS:

  • Обрезка с многоточием (textOverflow):
import { styled } from '@mui/material/styles';

const EllipsisText = styled('div')({
  whiteSpace: 'nowrap',
  overflow: 'hidden',
  textOverflow: 'ellipsis',
});

<EllipsisText>
  Очень длинный текст, который нужно обрезать с многоточием
</EllipsisText>
  • Многострочная обрезка (line-clamp):
const MultiLineEllipsis = styled('div')({
  display: '-webkit-box',
  WebkitBoxOrient: 'vertical',
  WebkitLineClamp: 3,
  overflow: 'hidden',
});

<MultiLineEllipsis>
  Длинный многострочный текст, который будет обрезан после третьей строки
</MultiLineEllipsis>

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

Стилизация текста через тему

MUI тесно интегрирован с темой, что позволяет централизованно управлять типографикой и стилями текста:

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

const theme = createTheme({
  typography: {
    h1: {
      fontSize: '3rem',
      fontWeight: 700,
      letterSpacing: '0.02em',
    },
    body1: {
      fontSize: '1rem',
      lineHeight: 1.6,
    },
  },
});

<ThemeProvider theme={theme}>
  <Typography variant="h1">Заголовок</Typography>
  <Typography variant="body1">Текст основного содержания</Typography>
</ThemeProvider>

Использование темы гарантирует единообразие стилей по всему приложению и упрощает поддержку.

Вспомогательные хелперы MUI

  • capitalize, uppercase, lowercase — встроенные функции для приведения текста к определённому регистру через CSS:
<Typography sx={{ textTransform: 'uppercase' }}>
  Пример текста в верхнем регистре
</Typography>
  • letterSpacing и wordSpacing — настройка межсимвольных и межсловных интервалов:
<Typography sx={{ letterSpacing: '0.1em', wordSpacing: '0.3em' }}>
  Текст с изменёнными интервалами
</Typography>
  • whiteSpace и overflowWrap — контроль переносов и поведения текста при переполнении:
<Typography sx={{ whiteSpace: 'pre-line', overflowWrap: 'break-word' }}>
  Текст с сохранением переносов и корректным переносом слов
</Typography>

Локализация и мультиязычность

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

import { useTranslation } from 'react-i18next';

const { t } = useTranslation();

<Typography variant="body1">{t('welcome_message')}</Typography>

Поддержка RTL (Right-To-Left) осуществляется через свойство direction темы:

const theme = createTheme({
  direction: 'rtl',
});

Интеграция с иконками и inline-элементами

Компонент Typography позволяет встраивать иконки и другие inline-компоненты без нарушения вертикального выравнивания текста:

import MailIcon from '@mui/icons-material/Mail';

<Typography variant="body1">
  <MailIcon fontSize="small" /> Контактный email
</Typography>

Использование flex-контейнеров и inline-стилей обеспечивает гибкое выравнивание и сочетание текста с визуальными элементами.

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

  • Typography является основой для всех текстовых элементов, обеспечивая поддержку вариаций и стилей Material Design.
  • Хелперы для обрезки текста (noWrap, textOverflow, line-clamp) позволяют контролировать визуальное переполнение.
  • Темизация упрощает поддержку глобальных стилей и единообразие интерфейса.
  • Встроенные CSS-хелперы (textTransform, letterSpacing, whiteSpace) позволяют точно настраивать отображение текста.
  • Поддержка мультиязычности и RTL обеспечивает корректное отображение текста в международных приложениях.

Использование этих утилит и хелперов делает работу с текстом в MUI гибкой, удобной и соответствующей современным стандартам веб-дизайна.

Оглавление