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

Question

我是 REACT 的新手，我正在使用 React 创建一个将使用波斯语(从右到左的脚本，如阿拉伯语)的应用程序，并且我正在使用 Material UI 框架。问题是，我无法以 rtl 格式从 Material UI 获取组件。我已按照以下步骤操作:

1. 我的 html 标签中有 rtl 方向。
2. 我点击了 rtl 切换按钮并复制了所有代码，但在粘贴时，组件不是完全从右到左，而是部分从右到左。
3. 我按照他们网站上写的从右到左的指南操作，但我无法让 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