Добавьте функцию RTL для своего приложения при использовании пользовательского интерфейса материала.

Поддерживаются языки с письмом справа налево, такие как арабский, персидский или иврит. Чтобы изменить направление компонентов MUI, необходимо выполнить следующие шаги.

1. HTML

Убедитесь, что для тела установлен атрибут dir, иначе нативные компоненты сломаются:

<body dir="rtl"> </body>

В качестве альтернативы вы также можете обернуть свое приложение в элемент с атрибутом dir:

function App() {
  return (
    <div dir="rtl">
      <MyComponent />
    </div>
  );
}

2. Тема

Установите для атрибута direction в вашей пользовательской теме значение rtl :

3. Установите плагин RTL

Когда вы используете emotion или styled-components, вам нужно stylis-plugin-rtl, чтобы перевернуть стили.

npm install stylis stylis-plugin-rtl

4. Загрузите плагин RTL

Если вы используете эмоции в качестве движка стиля, вам следует создать новый экземпляр кэша, использующий stylis-plugin-rtl, и разместить его в верхней части дерева приложений. Компонент CacheProvider позволяет это:

Наконец-то мы получаем задание и приложение RTL Now

Заключение

Спасибо за прочтение! Я надеюсь, что эта статья помогла вам понять реализацию RTL в вашем проекте, когда вы используете Material UI в своем проекте.

Найдите меня здесь и спасибо за чтение: