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

Question

我已经使用Ryan Cogswell 的回答让我的项目与 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>
  );
}

谢谢

标签： reactjsmaterial-ui

Answer 1

对于 rtl，Material-UI 图标不会自动翻转。这在这里讨论了一些：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>
  );
}