Локализация компонентов

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

import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import ruLocale from 'date-fns/locale/ru';

<LocalizationProvider dateAdapter={AdapterDateFns} locale={ruLocale}>
  <YourComponent />
</LocalizationProvider>

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

Локализация текстов компонентов

Для большинства компонентов MUI, таких как Pagination, TablePagination, Autocomplete, существует возможность замены системных текстов через объект localeText.

Пример локализации компонента Pagination:

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

const theme = createTheme({}, ruRU);

<ThemeProvider theme={theme}>
  <Pagination count={10} />
</ThemeProvider>

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

  • MUI содержит встроенные локали для многих языков (ruRU, frFR, deDE и др.).
  • Локали включают переводы системных текстов, таких как «Следующая страница», «Предыдущая страница», «Элементы на странице».
  • Для компонентов, не имеющих встроенной локали, можно создать собственный объект localeText.

Пример кастомного localeText для Autocomplete:

import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';

<Autocomplete
  options={options}
  renderInput={(params) => <TextField {...params} label="Выберите элемент" />}
  noOptionsText="Нет подходящих вариантов"
/>

Локализация календарей и дат

Компоненты DatePicker, TimePicker, DateTimePicker требуют отдельного подхода, так как они зависят от адаптера даты.

Пример с адаптером AdapterDayjs:

import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import 'dayjs/locale/ru';

<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="ru">
  <DatePicker label="Выберите дату" />
</LocalizationProvider>

Особенности:

  • adapterLocale задаёт язык интерфейса календаря.
  • Поддерживаются форматы даты, зависящие от локали, например DD.MM.YYYY для русской локали.
  • Внутри компонентов можно использовать format для точной настройки отображения даты.
<DatePicker
  label="Дата события"
  inputFormat="DD.MM.YYYY"
/>

Интеграция с ThemeProvider и глобальная локализация

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

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

const theme = createTheme({
  palette: {
    primary: { main: '#1976d2' },
  },
}, ruRU);

<ThemeProvider theme={theme}>
  <App />
</ThemeProvider>

Такой подход автоматически применяет локализованные тексты для всех компонентов MUI, которые поддерживают localeText.

Настройка локали через кастомные объекты

Для компонентов, где требуется полный контроль над текстами, создаётся кастомный объект локализации:

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

const customLocale = {
  MuiPagination: {
    "aria-label": "Постраничная навигация",
  },
  MuiTablePagination: {
    labelRowsPerPage: "Строк на странице:",
    labelDisplayedRows: ({ from, to, count }) => `${from}-${to} из ${count}`,
  },
};

const theme = createTheme({}, customLocale);

<ThemeProvider theme={theme}>
  <Pagination count={10} />
</ThemeProvider>

Важные моменты:

  • localeText или кастомные объекты позволяют гибко подстраивать компоненты под корпоративный стиль.
  • Поддерживается динамическая смена языка через состояние React, перерендер компонентов с новым ThemeProvider.

Динамическая смена локали

Для приложений с поддержкой нескольких языков можно реализовать смену локали на лету:

const [locale, setLocale] = React.useState(ruRU);

<ThemeProvider theme={createTheme({}, locale)}>
  <Button onCl ick={() => setLocale(enUS)}>Switch to English</Button>
  <Pagination count={10} />
</ThemeProvider>

Особенности реализации:

  • Все компоненты, которые используют локализацию MUI, автоматически перерендериваются.
  • Можно комбинировать с LocalizationProvider для корректного отображения дат при смене языка.
  • Для DatePicker рекомендуется хранить адаптер и локаль в состоянии, чтобы не нарушалась работа календаря.

Локализация с TypeScript

Для проектов на TypeScript важно корректно типизировать объекты локализации:

import { ComponentsLocaleText } from '@mui/material';

const ruLocaleText: ComponentsLocaleText = {
  MuiPagination: {
    "aria-label": "Постраничная навигация",
  },
  MuiTablePagination: {
    labelRowsPerPage: "Строк на странице:",
    labelDisplayedRows: ({ from, to, count }) => `${from}-${to} из ${count}`,
  },
};

Типизация помогает избежать ошибок при добавлении кастомных текстов и обеспечивает автодополнение в IDE.

Резюме ключевых техник

  1. LocalizationProvider — адаптер даты и локаль для компонентов Date/Time.
  2. Встроенные локали MUI (ruRU, enUS) — упрощают локализацию стандартных компонентов.
  3. localeText и кастомные объекты — точная настройка всех текстов интерфейса.
  4. ThemeProvider + локаль — глобальная локализация через тему.
  5. Динамическая смена локали — поддержка мультиязычных интерфейсов.
  6. Типизация в TypeScript — предотвращение ошибок при локализации.

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

Оглавление