Перевод текстов

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

Подключение локализации

MUI использует контекст ThemeProvider и LocalizationProvider для передачи локали и настроек перевода всем дочерним компонентам. Для начала необходимо установить библиотеку локализации:

npm install @mui/material @mui/lab @mui/x-date-pickers
npm install @mui/material/locale

Пример подключения локали:

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

const theme = createTheme({}, ruRU);

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button variant="contained">Пример кнопки</Button>
    </ThemeProvider>
  );
}

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

• createTheme позволяет объединять базовую тему и локализацию.
• Локали (ruRU, enUS, deDE и др.) содержат переводы для встроенных компонентов, таких как Pickers, Pagination, TablePagination.
• Передача локали через ThemeProvider обеспечивает единообразный перевод всех компонентов, поддерживающих локализацию.

Локализация компонентов Date/Time Pickers

Для компонентов выбора даты и времени используется отдельный провайдер LocalizationProvider, который обеспечивает работу с библиотеками даты (date-fns, dayjs, luxon):

import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { ruRU } from '@mui/x-date-pickers/locales';
import dayjs from 'dayjs';

function DatePickerExample() {
  const [value, setValue] = React.useState(dayjs());

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs} localeText={ruRU.components.MuiLocalizationProvider.defaultProps.localeText}>
      <DatePicker
        label="Выберите дату"
        value={value}
        onCha nge={(newValue) => setValue(newValue)}
      />
    </LocalizationProvider>
  );
}

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

• localeText отвечает за перевод встроенных подсказок и кнопок, например, “Сейчас”, “Очистить”, “Выбрать дату”.
• Можно расширять и переопределять отдельные строки через объект localeText.

Переопределение переводов отдельных компонентов

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

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

const theme = createTheme(
  {
    components: {
      MuiPagination: {
        defaultProps: {
          getItemAriaLabel: (type, page, selected) => {
            if (type === 'page') {
              return selected ? `Страница ${page}, текущая` : `Перейти на страницу ${page}`;
            }
            return type === 'next' ? 'Следующая страница' : 'Предыдущая страница';
          },
        },
      },
    },
  },
  ruRU
);

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Pagination count={10} />
      <Button variant="contained">Кнопка</Button>
    </ThemeProvider>
  );
}

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

• components.MuiPagination.defaultProps.getItemAriaLabel позволяет детально контролировать текст для скринридеров и подсказок.
• Переопределение отдельных компонентов не ломает глобальную локализацию, если она подключена через ThemeProvider.

Использование i18n с MUI

MUI легко интегрируется с системами перевода, такими как react-i18next или formatjs, для динамических текстов. Например:

import { useTranslation } from 'react-i18next';
import Button from '@mui/material/Button';

function MyComponent() {
  const { t } = useTranslation();

  return <Button>{t('submit')}</Button>;
}

• Все статические строки MUI остаются локализованными через тему.
• Динамические строки приложения управляются через i18n, что обеспечивает гибкость при работе с многоязычным интерфейсом.

Практические советы

• Всегда использовать ThemeProvider с локалью для единообразного перевода компонентов MUI.
• Для компонентов с датой/временем применять LocalizationProvider и адаптер выбранной библиотеки (dayjs, date-fns, luxon).
• Для кастомных подсказок и aria-меток использовать components.*.defaultProps с функциями, возвращающими строки.
• Для динамических текстов сочетать MUI с i18n, чтобы избежать смешивания переводов и упростить поддержку многоязычности.

Таблицы локализации по компонентам

Использование этих таблиц позволяет быстро ориентироваться, какие компоненты требуют отдельного переопределения текста, а какие локализуются глобально через тему.