该文档包含 rtl 支持的四个步骤：

1. dir在body元素上设置属性。

在我下面的示例中，这是通过以下方式处理的：

  React.useLayoutEffect(() => {
    document.body.setAttribute("dir", isRtl ? "rtl" : "ltr");
  }, [isRtl]);

2. direction在主题中设置。

在下面的示例中，我在两个主题之间切换：

const ltrTheme = createTheme({ direction: "ltr" });
const rtlTheme = createTheme({ direction: "rtl" });
...
<ThemeProvider theme={isRtl ? rtlTheme : ltrTheme}>
...
</ThemeProvider>

3. 安装 rtl 插件。

   • 对于 v4（使用 JSS），这意味着安装jss-rtl.
   • 对于 v5（使用 Emotion），这意味着安装stylis-plugin-rtl.

4. 加载 rtl 插件。

下面是一个 v4 示例，展示了如何为 JSS 加载 rtl 插件（v5 示例进一步向下）。

出于性能原因，避免重新渲染很重要StylesProvider，因此这不应该位于状态可以更改并因此触发重新渲染的组件中。在自己的应用程序，我有StylesProvider我的元index.js文件作为来电中的第一个元素react-DOM render。

import rtl from "jss-rtl";
import {
  StylesProvider,
  jssPreset
} from "@material-ui/core/styles";
// Configure JSS
const jss = create({ plugins: [...jssPreset().plugins, rtl()] });
export default function App() {
  return (
    <StylesProvider jss={jss}>
      <AppContent />
    </StylesProvider>
  );
}

下面的示例包括一个TextField，您可以看到标签的位置正确切换。

import React from "react";
import { create } from "jss";
import rtl from "jss-rtl";
import {
  StylesProvider,
  jssPreset,
  ThemeProvider,
  createTheme
} from "@material-ui/core/styles";
import CssBaseline from "@material-ui/core/CssBaseline";
import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";
import Box from "@material-ui/core/Box";

// Configure JSS
const jss = create({ plugins: [...jssPreset().plugins, rtl()] });

const ltrTheme = createTheme({ direction: "ltr" });
const rtlTheme = createTheme({ direction: "rtl" });

function AppContent() {
  const [isRtl, setIsRtl] = React.useState(false);
  const [value, setValue] = React.useState("initial value");
  React.useLayoutEffect(() => {
    document.body.setAttribute("dir", isRtl ? "rtl" : "ltr");
  }, [isRtl]);
  return (
    <ThemeProvider theme={isRtl ? rtlTheme : ltrTheme}>
      <CssBaseline />
      <Box m={2}>
        <TextField
          variant="outlined"
          value={value}
          onChange={(event) => setValue(event.target.value)}
          label={isRtl ? "بريد الكتروني او هاتف" : "Email or Phone"}
        />
        <br />
        <br />
        Current Direction: {isRtl ? "rtl" : "ltr"}
        <br />
        <Button onClick={() => setIsRtl(!isRtl)}>Toggle direction</Button>
      </Box>
    </ThemeProvider>
  );
}
export default function App() {
  return (
    <StylesProvider jss={jss}>
      <AppContent />
    </StylesProvider>
  );
}

下面是使用 Emotion 的 v5 的等效示例。

import React from "react";
import rtlPlugin from "stylis-plugin-rtl";
import { CacheProvider } from "@emotion/react";
import createCache from "@emotion/cache";
import { ThemeProvider, createTheme } from "@mui/material/styles";
import CssBaseline from "@mui/material/CssBaseline";
import TextField from "@mui/material/TextField";
import Button from "@mui/material/Button";
import Box from "@mui/material/Box";

const cacheLtr = createCache({
  key: "muiltr"
});

const cacheRtl = createCache({
  key: "muirtl",
  stylisPlugins: [rtlPlugin]
});

const ltrTheme = createTheme({ direction: "ltr" });
const rtlTheme = createTheme({ direction: "rtl" });

export default function App() {
  const [isRtl, setIsRtl] = React.useState(false);
  const [value, setValue] = React.useState("initial value");
  React.useLayoutEffect(() => {
    document.body.setAttribute("dir", isRtl ? "rtl" : "ltr");
  }, [isRtl]);
  return (
    <CacheProvider value={isRtl ? cacheRtl : cacheLtr}>
      <ThemeProvider theme={isRtl ? rtlTheme : ltrTheme}>
        <CssBaseline />
        <Box m={2}>
          <TextField
            value={value}
            onChange={(event) => setValue(event.target.value)}
            label={isRtl ? "بريد الكتروني او هاتف" : "Email or Phone"}
          />
          <br />
          <br />
          Current Direction: {isRtl ? "rtl" : "ltr"}
          <br />
          <Button onClick={() => setIsRtl(!isRtl)}>Toggle direction</Button>
        </Box>
      </ThemeProvider>
    </CacheProvider>
  );
}

另外，我后面有一个讨论翻转图标的答案：material-ui 图标不会在我更改为 RTL 时翻转。

我发现为特定组件设置此设置的另一个解决方案是在呈现组件后通过本机 JS 添加它。

首先，我创建了一个对输入元素的引用：

const inputRef = createRef() 
<TextField inputRef={inputRef} />

然后添加了一个 useEffect 钩子，在每次渲染时执行一次：

useEffect(() => { 
    if(inputRef) 
        inputRef.current.dir = 'auto' 
}, [])

不是最漂亮的代码，但它确实有效 😉

除了主题和 jss-rtl 以及Ryan Cogswell所说的内容之外，还有一个小问题，经过几天的搜索（实际上只有 3-4 天 :)），我找不到任何地方。这就是导入语句。

确保您的导入语句如下所示：

import TextField from "@material-ui/core/TextField";   //true

如果您的导入语句如下所示，则这些主题和 jss 内容都不起作用：

import TextField from "@mui/material/TextField";   //false