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

Question

我使用Ryan Cogswell's answer 让我的项目与 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>
  );
}

谢谢

Answer 1

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

也可以使用overrides in the theme 全局处理这个问题：

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