Reactjs 物料界面图标赢得'；当我切换到RTL时，不要翻转

我曾经让我的项目与RTL兼容

但由于某些原因，材质ui图标

没有相应地翻转。是因为它与RTL不兼容吗？还是我遗漏了什么

---

谢谢，rtl不会自动翻转材质UI图标。这里讨论了以下内容：

以下是处理

Send

图标的一种方法的示例（这种方法也适用于其他图标）：

还可以使用以下方法全局处理此问题：

这可能会与某些在默认样式中使用

transform

的材质UI组件中的样式设置发生冲突，但我目前看到的示例（例如）似乎仍然可以正常工作。这种全局方法目前会造成问题，并且双方都会根据

主题方向
交换使用的图标。然后，这种全局方法将翻转已经翻转的图标，因此如果您使用这些组件中的任何一个，您都需要考虑这一点

也有一些不需要翻转的图标，例如带有可识别符号的图标，如帮助（“？”）和附件（$”），因此我的建议是第一种方法，即直接将翻转行为添加到需要的图标中

下面是主题方法的完整工作示例：

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>
  );
}

从“React”导入React；
从“jss”导入{create}；
从“jss rtl”导入rtl；
进口{
StylesProvider，
jssPreset，
提供者，
创造博物馆
}来自“@material ui/core/styles”；
从“@material ui/core/CssBaseline”导入CssBaseline；
从“@material ui/core/TextField”导入TextField；
从“@物料界面/核心/按钮”导入按钮；
从“@material ui/core/Box”导入框；
从“@material ui/icons/Send”导入SendIcon；
常量覆盖={
MuiSvgIcon：{
根目录：{
“body[dir=rtl]&”：{
转换：“scaleX（-1）”
}
}
}
};
//配置JSS
const jss=create（{plugins:[…jssPreset（）.plugins，rtl（）]}）；
const ltrTheme=createMuiTheme（{方向：“ltr”}）；
const rtlTheme=createMuiTheme（{方向：“rtl”，覆盖}）；
函数AppContent（）{
const[isRtl，setIsRtl]=React.useState（false）；
React.useLayoutEffect（（）=>{
document.body.setAttribute（“dir”，isRtl？“rtl”：“ltr”）；
}，[isRtl]）；
返回(




当前方向：{isRtl？“rtl”：“ltr”}


setIsRtl（！isRtl）}>切换方向
);
}
导出默认函数App（）{
返回(
请包含一个。如果您不提供任何代码，我们将无法提供任何帮助。我认为RTL不适用于图标
  MuiSvgIcon: {
    root: {
      "body[dir=rtl] &": {
        transform: "scaleX(-1)"
      }
    }
  }

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>
  );
}