当我更改为 RTL 时，material-ui 图标不会翻转

我用过瑞安·科格斯韦尔的回答 https://stackoverflow.com/questions/62799638/material-ui-textfield-not-affected-with-the-rtl-direction让我的项目与 RTL 兼容。

但由于某种原因，Material-ui 图标<Send/>没有相应地翻转。是不是因为不兼容RTL？或者我错过了什么？

以下示例显示“发送”图标不翻转：

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";

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

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

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

Thanks

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

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

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

也可以使用全局处理这个覆盖主题中的 https://material-ui.com/customization/components/#global-theme-override:

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

存在一些风险，这可能会与某些使用 Material-UI 组件的样式发生冲突transform在默认样式中，但我到目前为止看过的示例（例如手风琴摘要 https://github.com/mui-org/material-ui/blob/v4.11.0/packages/material-ui/src/AccordionSummary/AccordionSummary.js#L62），似乎仍然工作正常。这种全球性的做法would目前导致问题表分页操作 https://github.com/mui-org/material-ui/blob/v4.11.0/packages/material-ui/src/TablePagination/TablePaginationActions.js#L40 and 分页项 https://github.com/mui-org/material-ui/blob/v4.11.0/packages/material-ui-lab/src/PaginationItem/PaginationItem.js#L213两者都交换它们使用的图标theme.direction。然后，这种全局方法将翻转已经翻转的图标，因此如果您使用这些组件中的任何一个，则需要考虑到这一点。

还有一些图标不需要翻转，例如带有可识别符号的图标，例如帮助（“？”）和 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>
  );
}