小编Gad*_*leh的帖子

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

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

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

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 …

所以我有这个烦人的问题，我找不到结果。我是 material-ui 的新手，感觉好像我在这里遗漏了一些东西......

我只想要网格项之间的分隔符，而不破坏网格的顺序。我错过了什么？

沙盒：https : //vpbyd.csb.app/

import React from "react";
import "./styles.css";
import {Grid, Typography, Divider} from '@material-ui/core'

export default function App() {
  return (
    <div className="App">
       <Grid container spacing={3}>

<Grid item xs={4}> 
<Typography variant="h5" component="h2">
One
</Typography>
</Grid>
<Grid item xs={4}> 
<Typography variant="h5" component="h2">
  Two
  </Typography>
</Grid>
<Grid item xs={4}> 
<Typography variant="h5" component="h2">
  Three
  </Typography>
</Grid>

</Grid>

<Grid container spacing={0} alignItems="center">

<Grid item xs={4}> 
<Typography variant="h6" component="h2">
first value
</Typography>
</Grid>
<Divider orientation="vertical" flexItem/>
<Grid item xs={4}> …