title: How to use the right-to-left option for Material UI templates?
body: <p>I am new to REACT and I am creating an application with React that is going to be in Persian (right-to-left script like Arabic) and I am using Material UI framework. The problem is that, I cannot get the components from Material UI in rtl format. I have followed the following steps:</p>
  
  <ol>
  <li>I have the direction as rtl in my html tag.
     </li>
  <li>I have clicked on the rtl toggle button and copied all the codes but upon pasting it, the components aren't completely right to left and partially right to left.</li>
  <li>I followed the guide for right to left written in their website but I can't get the jss library to work. 
  <a href="https://material-ui.com/guides/right-to-left/" rel="nofollow noreferrer">RIGHT TO LEFT GUIDE _ MATERIAL UI</a></li>
  </ol>
  
  <p>Can someone please clarify how to use this jss-rtl in detail since i am new to REACTJS.</p>
  
  <p>I am attaching a form that i want to be in rtl format. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 (
      &lt;Typography variant="body2" color="textSecondary" align="center"&gt;
        {'Copyright © '}
        &lt;Link color="inherit" href="https://material-ui.com/"&gt;
          Your Website
        &lt;/Link&gt;{' '}
        {new Date().getFullYear()}
        {'.'}
      &lt;/Typography&gt;
    );
  }
  
  const useStyles = makeStyles((theme) =&gt; ({
    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 (
      &lt;Container component="main" maxWidth="xs"&gt;
        &lt;CssBaseline /&gt;
        &lt;div className={classes.paper}&gt;
          &lt;Avatar className={classes.avatar}&gt;
            &lt;LockOutlinedIcon /&gt;
          &lt;/Avatar&gt;
          &lt;Typography component="h1" variant="h5"&gt;
            Sign in
          &lt;/Typography&gt;
          &lt;form className={classes.form} noValidate&gt;
            &lt;TextField
              variant="outlined"
              margin="normal"
              required
              fullWidth
              id="email"
              label="Email Address"
              name="email"
              autoComplete="email"
              autoFocus
            /&gt;
            &lt;TextField
              variant="outlined"
              margin="normal"
              required
              fullWidth
              name="password"
              label="Password"
              type="password"
              id="password"
              autoComplete="current-password"
            /&gt;
            &lt;FormControlLabel
              control={&lt;Checkbox value="remember" color="primary" /&gt;}
              label="Remember me"
            /&gt;
            &lt;Button
              type="submit"
              fullWidth
              variant="contained"
              color="primary"
              className={classes.submit}
            &gt;
              Sign In
            &lt;/Button&gt;
            &lt;Grid container&gt;
              &lt;Grid item xs&gt;
                &lt;Link href="#" variant="body2"&gt;
                  Forgot password?
                &lt;/Link&gt;
              &lt;/Grid&gt;
              &lt;Grid item&gt;
                &lt;Link href="#" variant="body2"&gt;
                  {"Don't have an account? Sign Up"}
                &lt;/Link&gt;
              &lt;/Grid&gt;
            &lt;/Grid&gt;
          &lt;/form&gt;
        &lt;/div&gt;
        &lt;Box mt={8}&gt;
          &lt;Copyright /&gt;
        &lt;/Box&gt;
      &lt;/Container&gt;
    );
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>