如何为 Material UI 模板使用从右到左的选项？

Question

我是 REACT 的新手，我正在使用 React 创建一个应用程序，它将使用波斯语（从右到左的脚本，如阿拉伯语），我正在使用 Material UI 框架。问题是，我无法以 rtl 格式从 Material UI 中获取组件。我遵循了以下步骤：

我的 html 标签中有 rtl 方向。
我点击了 rtl 切换按钮并复制了所有代码，但在粘贴时，组件不是完全从右到左，而是部分从右到左。
我按照他们网站上写的从右到左的指南操作，但我无法让 jss 库工作。 RIGHT TO LEFT GUIDE _ MATERIAL UI

有人可以详细说明如何使用这个 jss-rtl，因为我是 REACTJS 的新手。

我附上了一张表格，我希望它是 rtl 格式。

import React from 'react';
import Avatar from '@material-ui/core/Avatar';
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import TextField from '@material-ui/core/TextField';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import Link from '@material-ui/core/Link';
import Grid from '@material-ui/core/Grid';
import Box from '@material-ui/core/Box';
import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';

function Copyright() {
  return (
    <Typography variant="body2" color="textSecondary" align="center">
      {'Copyright © '}
      <Link color="inherit" href="https://material-ui.com/">
        Your Website
      </Link>{' '}
      {new Date().getFullYear()}
      {'.'}
    </Typography>
  );
}

const useStyles = makeStyles((theme) => ({
  paper: {
    marginTop: theme.spacing(8),
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
  },
  avatar: {
    margin: theme.spacing(1),
    backgroundColor: theme.palette.secondary.main,
  },
  form: {
    width: '100%', // Fix IE 11 issue.
    marginTop: theme.spacing(1),
  },
  submit: {
    margin: theme.spacing(3, 0, 2),
  },
}));

export default function SignIn() {
  const classes = useStyles();

  return (
    <Container component="main" maxWidth="xs">
      <CssBaseline />
      <div className={classes.paper}>
        <Avatar className={classes.avatar}>
          <LockOutlinedIcon />
        </Avatar>
        <Typography component="h1" variant="h5">
          Sign in
        </Typography>
        <form className={classes.form} noValidate>
          <TextField
            variant="outlined"
            margin="normal"
            required
            fullWidth
            id="email"
            label="Email Address"
            name="email"
            autoComplete="email"
            autoFocus
          />
          <TextField
            variant="outlined"
            margin="normal"
            required
            fullWidth
            name="password"
            label="Password"
            type="password"
            id="password"
            autoComplete="current-password"
          />
          <FormControlLabel
            control={<Checkbox value="remember" color="primary" />}
            label="Remember me"
          />
          <Button
            type="submit"
            fullWidth
            variant="contained"
            color="primary"
            className={classes.submit}
          >
            Sign In
          </Button>
          <Grid container>
            <Grid item xs>
              <Link href="#" variant="body2">
                Forgot password?
              </Link>
            </Grid>
            <Grid item>
              <Link href="#" variant="body2">
                {"Don't have an account? Sign Up"}
              </Link>
            </Grid>
          </Grid>
        </form>
      </div>
      <Box mt={8}>
        <Copyright />
      </Box>
    </Container>
  );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

**继续以 LTR 格式对所有元素进行编码。

在 index.js 中，使用下面给出的代码：

    import React from "react";
    import ReactDOM from "react-dom";
    import { createMuiTheme } from "@material-ui/core/styles";
    import { StylesProvider, ThemeProvider, jssPreset } from "@material-ui/styles";
    import { create } from "jss";
    import rtl from "jss-rtl";
    import Demo from "./demo";
    
    const jss = create({ plugins: [...jssPreset().plugins, rtl()] });
    const theme = createMuiTheme({
      direction: "rtl"
    });
    
    ReactDOM.render(
      <StylesProvider jss={jss}>
        <ThemeProvider theme={theme}>
          <Demo />
        </ThemeProvider>
      </StylesProvider>,
      document.querySelector("#root")
    );

100% 有效。

回答感谢

https://github.com/oliviertassinari

**https://github.com/mui-org/material-ui/issues/14283#issuecomment-456760361

如何为 Material UI 模板使用从右到左的选项？

How to use the right-to-left option for Material UI templates?

javascript

css

right-to-left

reactjs