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

Question

我已经使用Ryan Cogswell 的答案让我的项目与 RTL 兼容。

\n

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

\n

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

\n

import React from "react";\nimport { create } from "jss";\nimport rtl from "jss-rtl";\nimport {\n  StylesProvider,\n  jssPreset,\n  ThemeProvider,\n  createMuiTheme\n} from "@material-ui/core/styles";\nimport CssBaseline from "@material-ui/core/CssBaseline";\nimport TextField from "@material-ui/core/TextField";\nimport Button from "@material-ui/core/Button";\nimport Box from "@material-ui/core/Box";\nimport SendIcon from "@material-ui/icons/Send";\n\n// Configure JSS\nconst jss = create({ plugins: [...jssPreset().plugins, rtl()] });\n\nconst ltrTheme = createMuiTheme({ direction: "ltr" });\nconst rtlTheme = createMuiTheme({ direction: "rtl" });\n\nfunction AppContent() {\n  const [isRtl, setIsRtl] = React.useState(false);\n  React.useLayoutEffect(() => {\n    document.body.setAttribute("dir", isRtl ? "rtl" : "ltr");\n  }, [isRtl]);\n  return (\n    <ThemeProvider theme={isRtl ? rtlTheme : ltrTheme}>\n      <CssBaseline />\n      <Box m={2}>\n        <TextField label={isRtl ? "\xd8\xa8\xd8\xb1\xd9\x8a\xd8\xaf \xd8\xa7\xd9\x84\xd9\x83\xd8\xaa\xd8\xb1\xd9\x88\xd9\x86\xd9\x8a \xd8\xa7\xd9\x88 \xd9\x87\xd8\xa7\xd8\xaa\xd9\x81" : "Email or Phone"} />\n        <br />\n        <SendIcon />\n        <br />\n        Current Direction: {isRtl ? "rtl" : "ltr"}\n        <br />\n        <Button onClick={() => setIsRtl(!isRtl)}>Toggle direction</Button>\n      </Box>\n    </ThemeProvider>\n  );\n}\nexport default function App() {\n  return (\n    <StylesProvider jss={jss}>\n      <AppContent />\n    </StylesProvider>\n  );\n}\n

\n

\n

谢谢

\n

Answer 1

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

\n

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

\n

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

\n

\n

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

\n

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

\n

存在一些风险，这可能与某些transform在默认样式中使用的 Material-UI 组件中的样式发生冲突，但我到目前为止查看的示例（例如AccordionSummary）似乎仍然可以正常工作。这种全局方法目前会导致TablePaginationActions和PaginationItem出现问题，它们都会根据theme.direction. 然后，这种全局方法将翻转已经翻转的图标，因此如果您使用这些组件中的任何一个，则需要考虑到这一点。

\n

还有一些图标不需要翻转，例如带有可识别符号的图标，例如帮助（“？”）和 AttachMoney（“$”），因此我的建议是第一种方法，即显式添加翻转行为需要它的图标。

\n

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

\n

import React from "react";\nimport { create } from "jss";\nimport rtl from "jss-rtl";\nimport {\n  StylesProvider,\n  jssPreset,\n  ThemeProvider,\n  createMuiTheme\n} from "@material-ui/core/styles";\nimport CssBaseline from "@material-ui/core/CssBaseline";\nimport TextField from "@material-ui/core/TextField";\nimport Button from "@material-ui/core/Button";\nimport Box from "@material-ui/core/Box";\nimport SendIcon from "@material-ui/icons/Send";\n\nconst overrides = {\n  MuiSvgIcon: {\n    root: {\n      "body[dir=rtl] &": {\n        transform: "scaleX(-1)"\n      }\n    }\n  }\n};\n// Configure JSS\nconst jss = create({ plugins: [...jssPreset().plugins, rtl()] });\n\nconst ltrTheme = createMuiTheme({ direction: "ltr" });\nconst rtlTheme = createMuiTheme({ direction: "rtl", overrides });\n\nfunction AppContent() {\n  const [isRtl, setIsRtl] = React.useState(false);\n  React.useLayoutEffect(() => {\n    document.body.setAttribute("dir", isRtl ? "rtl" : "ltr");\n  }, [isRtl]);\n  return (\n    <ThemeProvider theme={isRtl ? rtlTheme : ltrTheme}>\n      <CssBaseline />\n      <Box m={2}>\n        <TextField label={isRtl ? "\xd8\xa8\xd8\xb1\xd9\x8a\xd8\xaf \xd8\xa7\xd9\x84\xd9\x83\xd8\xaa\xd8\xb1\xd9\x88\xd9\x86\xd9\x8a \xd8\xa7\xd9\x88 \xd9\x87\xd8\xa7\xd8\xaa\xd9\x81" : "Email or Phone"} />\n        <br />\n        <SendIcon />\n        <br />\n        Current Direction: {isRtl ? "rtl" : "ltr"}\n        <br />\n        <Button onClick={() => setIsRtl(!isRtl)}>Toggle direction</Button>\n      </Box>\n    </ThemeProvider>\n  );\n}\nexport default function App() {\n  return (\n    <StylesProvider jss={jss}>\n      <AppContent />\n    </StylesProvider>\n  );\n}\n

\n

\n