如何在Material UI版本5中配置RTL（从右到左）支持

Question

如何在Material UI版本5中配置RTL（从右到左）支持

8

我更新了我的应用程序，从版本4更新到版本5的Material-UI，但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。请帮我找出问题所在，谢谢。

- Netanel Vaknin

你有什么问题吗？对我来说，v4和v5 RTL的“TextField”看起来一样。 - NearHuscarl

你可以查看我添加的Codesandbox。TextField的标签应该是LTR而不是RTL。 - Netanel Vaknin

v4版本的标签也在左边，只有占位符在右边。所以你也想把它们都放在右边，对吗？ - NearHuscarl

是的，我想在我的应用程序中全局设置RTL。 - Netanel Vaknin

嗨，我这里也有同样的问题。有解决方案吗？ - Rouzbeh Zarandi

2个回答

1

处理这个问题花了我一些时间！最终我使用了 document.dir 和所有 MUI 的文档指示。

这是我的代码在 CodeSandbox 上的实例（它切换方向 + MUI 语言 + 日期选择器 + 主题模式）： https://codesandbox.io/p/sandbox/quizzical-zhukovsky-lvq2fs?file=%2Fsrc%2FSupportedLocales.ts%3A10%2C33

我写了一篇很长的文章介绍这个问题：https://medium.com/@itayperry91/react-and-mui-change-muis-theme-mode-direction-and-language-including-date-pickers-ad8e91af30ae

- Itay

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mohammad Taheri · Accepted Answer

我之前在使用波斯语时遇到了这个问题。但答案非常简单，只需要按照以下步骤操作：

我的示例环境如下：

"react": "^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">`

步骤三：在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>
);

现在您的整个应用程序是从右到左。我将通过图片展示一个波斯语的例子，以便您可以看到：

按以下方式更改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 = [
  "آذربایجان شرقی",
  "آذربایجان غربی",
  "اردبیل",
  "اصفهان",
  "البرز",
  "ایلام",
  "بوشهر",
  "تهران",
  "چهارمحال و بختیاری",
]

并查看结果：