如何在资料UI版本5中配置RTL (从右到左)支持
我将我的应用程序从第4版升级到了Material-UI版本5，而且RTL支持也不再起作用了。
我看了一下这些文档，然后按照每一步操作：
https://mui.com/guides/right-to-left/
实际结果是应用程序仍然是LTR (您可以查看下面的Codesandbox链接中的TextField组件)。
预期的结果是应用程序应该是RTL。
尽管如此，RTL的支持仍然不起作用。
此外，我还在Codesandbox中创建了一个示例版本：
https://codesandbox.io/s/issue-with-rtl-in-material-ui-v5-jtii6?file=/src/index.js
我很感谢你帮忙找出问题所在。
谢谢。
回答 1
Stack Overflow用户
发布于 2022-07-21 16:57:02
我在使用波斯语时遇到了这个问题。但答案太简单了。你只需要一些简单的步骤。我的示例环境是：
“反应”："^18.2.0"
- "react-dom"："^18.2.0"
让我们这样做：
第1步:安装下面的软件包(我给出了确切的版本，以确保它在将来的更新中有效)：
- "@emotion/react"："^11.9.3"
- "@emotion/styled"："^11.9.3"
- "@mui/icons-material"："^5.8.4"
- "@mui/material"："^5.9.1"
- "stylis"："^4.1.1"
- "stylis-plugin-rtl"："^2.1.1"
提示:这是我的package.json文件：
步骤2:在public/index.html中更改html标记的方向，如下所示：
`<html lang="fa" dir="rtl">`步骤3:在index.js文件中添加以下部分：
3-1 :所需进口：
import {createTheme, ThemeProvider} from '@mui/material/styles';
import rtlPlugin from 'stylis-plugin-rtl';
import {prefixer} from 'stylis';
import {CacheProvider} from '@emotion/react';
import createCache from '@emotion/cache';3-2 :所需缓存：
const cacheRtl = createCache({
key: 'muirtl',
stylisPlugins: [prefixer, rtlPlugin],
});3-3 :所需主题：
const theme = createTheme({
direction: 'rtl',
});3-4:这是最后一步，在这个步骤中，您在组件周围包装了两个包装器，如下所示：
<CacheProvider value={cacheRtl}>
<ThemeProvider theme={theme}>
<App/>
</ThemeProvider>
</CacheProvider>最后，您完成的index.js文件应该完全如下所示：
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import {createTheme, ThemeProvider} from '@mui/material/styles';
import rtlPlugin from 'stylis-plugin-rtl';
import {prefixer} from 'stylis';
import {CacheProvider} from '@emotion/react';
import createCache from '@emotion/cache';
const cacheRtl = createCache({
key: 'muirtl',
stylisPlugins: [prefixer, rtlPlugin],
});
const theme = createTheme({
direction: 'rtl',
});
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<CacheProvider value={cacheRtl}>
<ThemeProvider theme={theme}>
<App/>
</ThemeProvider>
</CacheProvider>
);现在，您的整个应用程序是rtl。我给你们展示了一个波斯语的例子，并给出了这些图片：
更改您的App.jsx组件如下：
import React from 'react';
import {Autocomplete, Box, TextField} from "@mui/material";
const App = () => {
return (
<Box m={2}>
<Autocomplete
sx={{width: 300}}
options={iranStates}
onChange={(event, value) => console.log(value)}
renderInput={(params) => <TextField {...params} label={"لیست استانها"}/>}/>
</Box>
);
};
export default App;
const iranStates = [
"آذربایجان شرقی",
"آذربایجان غربی",
"اردبیل",
"اصفهان",
"البرز",
"ایلام",
"بوشهر",
"تهران",
"چهارمحال و بختیاری",
]并看到结果：
https://stackoverflow.com/questions/69371106
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号