Material-UI 图标不会为 rtl 自动翻转。这里讨论了一些：https : //github.com/mui-org/material-ui/issues/22726。

这是为Send图标处理此问题的一种方法的示例（这种方法也应可用于其他图标）：

const DirectionAwareSendIcon = withStyles((theme) => ({
  root: {
    transform: theme.direction === "rtl" ? "scaleX(-1)" : undefined
  }
}))(SendIcon);

也可以使用主题中的覆盖来全局处理此问题：

  MuiSvgIcon: {
    root: {
      "body[dir=rtl] &": {
        transform: "scaleX(-1)"
      }
    }
  }

存在一些风险，即这可能与transform默认样式中使用的某些 Material-UI 组件中的样式发生冲突，但到目前为止我看过的示例（例如AccordionSummary）似乎仍然可以正常工作。这种全球性的办法将目前令人问题TablePaginationActions和PaginationItem这两者交换的图标，他们使用基于theme.direction。这种全局方法会翻转已经翻转的图标，因此如果您使用这些组件中的任何一个，则需要考虑到这一点。

还有一些不希望翻转的图标，例如带有可识别符号的图标，例如 Help ("?") 和 AttachMoney ("$")，所以我的建议是将翻转行为明确添加到的第一种方法需要它的图标。

这是使用主题方法的完整工作示例：

import React from "react";
import { create } from "jss";
import rtl from "jss-rtl";
import {
  StylesProvider,
  jssPreset,
  ThemeProvider,
  createMuiTheme
} 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";
import SendIcon from "@material-ui/icons/Send";

const overrides = {
  MuiSvgIcon: {
    root: {
      "body[dir=rtl] &": {
        transform: "scaleX(-1)"
      }
    }
  }
};
// Configure JSS
const jss = create({ plugins: [...jssPreset().plugins, rtl()] });

const ltrTheme = createMuiTheme({ direction: "ltr" });
const rtlTheme = createMuiTheme({ direction: "rtl", overrides });

function AppContent() {
  const [isRtl, setIsRtl] = React.useState(false);
  React.useLayoutEffect(() => {
    document.body.setAttribute("dir", isRtl ? "rtl" : "ltr");
  }, [isRtl]);
  return (
    <ThemeProvider theme={isRtl ? rtlTheme : ltrTheme}>
      <CssBaseline />
      <Box m={2}>
        <TextField label={isRtl ? "بريد الكتروني او هاتف" : "Email or Phone"} />
        <br />
        <SendIcon />
        <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>
  );
}