如何在 Material UI 版本 5 中配置 RTL（从右到左）支持
Net*_*nin 8 javascript reactjs material-ui
我将应用程序Material-UI从版本 4 更新到版本 5，但 RTL 支持不再起作用。
我查看了文档并按照每个步骤进行操作：
https://mui.com/guides/right-to-left/
实际结果是应用程序仍然是 LTR（您可以查看TextField下面 Codesandbox 链接中的组件）。
预期结果是应用程序应该是 RTL。
尽管如此，RTL 支持仍然不起作用。
此外，我在以下位置创建了一个示例版本Codesandbox：
https://codesandbox.io/s/issue-with-rtl-in-material-ui-v5-jtii6?file=/src/index.js
我将感谢您帮助找出问题所在。
谢谢。
小智 21
我在使用波斯语时遇到了这个问题。但它的答案太简单了。您只需要一些简单的步骤。\n我的示例环境是：
\n- \n
- “反应”：“^18.2.0” \n
- "react-dom": "^18.2.0" \n
我们开始做吧：
\n第 1 步：安装以下软件包（我为您提供确切的版本，以确保它在未来更新时有效）：
\n- \n
- “@情感/反应”：“^11.9.3” \n
- “@emotion/styled”：“^11.9.3” \n
- “@mui/icons-material”：“^5.8.4” \n
- “@mui/material”：“^5.9.1” \n
- "手写笔": "^4.1.1" \n
- "stylis-plugin-rtl": "^2.1.1" \n
提示：这是我的 package.json 文件：
\n
步骤 2：更改 public/index.html 中 html 标签的方向，如下所示：
\n`<html lang="fa" dir="rtl">`\n步骤 3：在 index.js 文件中添加以下部分：
\n3-1：所需进口：
\nimport {createTheme, ThemeProvider} from \'@mui/material/styles\';\nimport rtlPlugin from \'stylis-plugin-rtl\';\nimport {prefixer} from \'stylis\';\nimport {CacheProvider} from \'@emotion/react\';\nimport createCache from \'@emotion/cache\';\n3-2：所需缓存：
\nconst cacheRtl = createCache({\n key: \'muirtl\',\n stylisPlugins: [prefixer, rtlPlugin],\n});\n3-3：所需主题：
\nconst theme = createTheme({\n direction: \'rtl\',\n});\n3-4：这是最后一步，您将两个包装器包裹在组件周围，如下所示：
\n<CacheProvider value={cacheRtl}>\n <ThemeProvider theme={theme}>\n <App/>\n </ThemeProvider>\n</CacheProvider>\n最后，您完成的 index.js 文件应该如下所示：
\nimport React from \'react\';\nimport ReactDOM from \'react-dom/client\';\nimport \'./index.css\';\nimport App from \'./App\';\nimport {createTheme, ThemeProvider} from \'@mui/material/styles\';\nimport rtlPlugin from \'stylis-plugin-rtl\';\nimport {prefixer} from \'stylis\';\nimport {CacheProvider} from \'@emotion/react\';\nimport createCache from \'@emotion/cache\';\n\nconst cacheRtl = createCache({\n key: \'muirtl\',\n stylisPlugins: [prefixer, rtlPlugin],\n});\nconst theme = createTheme({\n direction: \'rtl\',\n});\n\nconst root = ReactDOM.createRoot(document.getElementById(\'root\'));\nroot.render(\n <CacheProvider value={cacheRtl}>\n <ThemeProvider theme={theme}>\n <App/>\n </ThemeProvider>\n </CacheProvider>\n);\n现在你的整个应用程序是rtl。我向您展示一个带图像的波斯语示例，您可以看到这一点：
\n像这样更改您的 App.jsx 组件：
\nimport React from \'react\';\nimport {Autocomplete, Box, TextField} from "@mui/material";\n\nconst App = () => {\n return (\n <Box m={2}>\n <Autocomplete\n sx={{width: 300}}\n options={iranStates}\n onChange={(event, value) => console.log(value)}\n renderInput={(params) => <TextField {...params} label={"\xd9\x84\xdb\x8c\xd8\xb3\xd8\xaa \xd8\xa7\xd8\xb3\xd8\xaa\xd8\xa7\xd9\x86\xd9\x87\xd8\xa7"}/>}/>\n </Box>\n );\n};\n\nexport default App;\n\nconst iranStates = [\n "\xd8\xa2\xd8\xb0\xd8\xb1\xd8\xa8\xd8\xa7\xdb\x8c\xd8\xac\xd8\xa7\xd9\x86 \xd8\xb4\xd8\xb1\xd9\x82\xdb\x8c",\n "\xd8\xa2\xd8\xb0\xd8\xb1\xd8\xa8\xd8\xa7\xdb\x8c\xd8\xac\xd8\xa7\xd9\x86 \xd8\xba\xd8\xb1\xd8\xa8\xdb\x8c",\n "\xd8\xa7\xd8\xb1\xd8\xaf\xd8\xa8\xdb\x8c\xd9\x84",\n "\xd8\xa7\xd8\xb5\xd9\x81\xd9\x87\xd8\xa7\xd9\x86",\n "\xd8\xa7\xd9\x84\xd8\xa8\xd8\xb1\xd8\xb2",\n "\xd8\xa7\xdb\x8c\xd9\x84\xd8\xa7\xd9\x85",\n "\xd8\xa8\xd9\x88\xd8\xb4\xd9\x87\xd8\xb1",\n "\xd8\xaa\xd9\x87\xd8\xb1\xd8\xa7\xd9\x86",\n "\xda\x86\xd9\x87\xd8\xa7\xd8\xb1\xd9\x85\xd8\xad\xd8\xa7\xd9\x84 \xd9\x88 \xd8\xa8\xd8\xae\xd8\xaa\xdb\x8c\xd8\xa7\xd8\xb1\xdb\x8c",\n]\n并查看结果：
\n
| 归档时间： |
|
| 查看次数： |
4466 次 |
| 最近记录： |