Добавьте функцию 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 в своем проекте.
Найдите меня здесь и спасибо за чтение: