RTL поддержка

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

Основные концепции RTL в MUI

  1. Направление текста MUI использует свойство direction в теме (theme) для управления направлением текста. Значение может быть:

    • 'ltr' — слева направо (по умолчанию)
    • 'rtl' — справа налево
    import { createTheme } from '@mui/material/styles';

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

    Установка direction на 'rtl' влияет на все компоненты, которые используют внутренние стили MUI.

  2. Стилизация с учетом направления MUI автоматически переворачивает стили, которые зависят от направления (например, marginLeft ↔︎ marginRight, paddingLeft ↔︎ paddingRight). Для компонентов, написанных вручную с sx или styled, нужно использовать функцию theme.direction:

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

function ExampleBox() {
  const theme = useTheme();
  return (
    <Box
      sx={{
        marginLeft: theme.direction === 'rtl' ? 2 : 4,
        marginRight: theme.direction === 'rtl' ? 4 : 2,
      }}
    >
      Контент
    </Box>
  );
}

Интеграция с Emotion для RTL

MUI использует библиотеку Emotion для стилизации, и для корректной работы RTL требуется подключить плагин stylis-plugin-rtl.

  1. Установка зависимостей

    npm install @emotion/react @emotion/styled stylis stylis-plugin-rtl

  2. Настройка Emotion Cache с поддержкой RTL

    import createCache from '@emotion/cache';
import rtlPlugin from 'stylis-plugin-rtl';

const cacheRtl = createCache({
  key: 'mui-rtl',
  stylisPlugins: [rtlPlugin],
});

export default cacheRtl;

  3. Применение в приложении через CacheProvider

    import { CacheProvider } from '@emotion/react';
import { ThemeProvider, CssBaseline } from '@mui/material';
import theme from './theme';
import cacheRtl from './cacheRtl';
import App from './App';

function Root() {
  return (
    <CacheProvider value={cacheRtl}>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <App />
      </ThemeProvider>
    </CacheProvider>
  );
}

export default Root;

Компоненты с автоматическим зеркалированием

Некоторые компоненты MUI, такие как Drawer, IconButton, Menu, автоматически изменяют ориентацию при включении RTL. Примеры:

  • Drawer

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

<Drawer anchor="left" open={true}>
  Содержимое
</Drawer>

    В режиме 'rtl' anchor="left" фактически отображается справа.

  • IconButton с иконками стрелок

    MUI автоматически меняет направление стрелок для кнопок ArrowBack, ArrowForward, если включен RTL.

Динамическое переключение направлений

Для приложений, поддерживающих многоязычность, может потребоваться динамически менять направление текста. Для этого достаточно обновлять direction в теме и перестраивать кэш Emotion:

import { useState } from 'react';
import { ThemeProvider, createTheme, CssBaseline } from '@mui/material';
import { CacheProvider } from '@emotion/react';
import createCache from '@emotion/cache';
import rtlPlugin from 'stylis-plugin-rtl';

function App() {
  const [isRtl, setIsRtl] = useState(false);

  const theme = createTheme({ direction: isRtl ? 'rtl' : 'ltr' });

  const cache = createCache({
    key: isRtl ? 'mui-rtl' : 'mui-ltr',
    stylisPlugins: isRtl ? [rtlPlugin] : [],
  });

  return (
    <CacheProvider value={cache}>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <button onCl ick={() => setIsRtl(!isRtl)}>Переключить направление</button>
        {/* Остальная часть интерфейса */}
      </ThemeProvider>
    </CacheProvider>
  );
}

Важные рекомендации

  • Всегда использовать ThemeProvider для установки направления в теме.
  • Для правильного рендеринга динамического RTL менять не только тему, но и кэш Emotion.
  • Компоненты MUI, использующие внутренние стили, автоматически адаптируются под RTL, но кастомные компоненты требуют проверки и возможной коррекции через theme.direction.
  • Проверять поведение иконок и стрелок в компонентах навигации, чтобы избежать визуальных несоответствий.

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

Оглавление