html - 如何使用 React.js 移动材质 ui 标签 RTL

Question

我一直在尝试将标签从左侧移动到右侧，如下图所示：

我希望它从左到右。这是我的代码：

import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
import FormControl from '@material-ui/core/FormControl';
import TextField from '@material-ui/core/TextField';
import Grid from '@material-ui/core/Grid';
import AccountCircle from '@material-ui/icons/AccountCircle';
import FormGroup from '@material-ui/core/FormGroup';
import RTL from '../RTL/RTL';

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    margin: {
      margin: theme.spacing(1),
    },
    mainInputsContainer: {
      display: 'flex',
      width: '100%',
      justifyContent: 'center',
    },
    mainInputsOverAllWrapper: {
      width: '100%',
    },
  })
);

const InputForm: React.FC = () => {
  const classes = useStyles();

  return (
    <div className={classes.mainInputsOverAllWrapper}>
      <div className={classes.mainInputsContainer}>
        <FormGroup>
          <div className={classes.margin} dir="rtl">
            <RTL>
              <Grid container spacing={1} alignItems="flex-end">
                <Grid item>
                  <AccountCircle />
                </Grid>
                <Grid item>
                  <TextField id="input-with-icon-grid-rtl" label="تجريب" />
                </Grid>
              </Grid>
            </RTL>
          </div>
          <div className={classes.margin} dir="rtl">
            <Grid container spacing={1} alignItems="flex-end" dir="rtl">
              <Grid item>
                <AccountCircle />
              </Grid>
              <Grid item>
                <TextField id="input-with-icon-grid" label="With a grid" />
              </Grid>
            </Grid>
          </div>
        </FormGroup>
        <FormGroup>
          <div className={classes.margin}>
            <Grid container spacing={1} alignItems="flex-end" dir="rtl">
              <Grid item>
                <AccountCircle />
              </Grid>
              <Grid item>
                <TextField
                  id="input-with-icon-grid"
                  dir="rtl"
                  label="اسم المستخدم"
                />
              </Grid>
            </Grid>
          </div>
          <div className={classes.margin}>
            <Grid container spacing={1} alignItems="flex-end" dir="rtl">
              <Grid item>
                <AccountCircle />
              </Grid>
              <Grid item>
                <TextField id="input-with-icon-grid" label="With a grid" />
              </Grid>
            </Grid>
          </div>
        </FormGroup>
      </div>
    </div>
  );
};

export default InputForm;

这是我的 RTL 文件：

import { create } from 'jss';
import rtl from 'jss-rtl';
import { StylesProvider, jssPreset } from '@material-ui/core/styles';

const jss = create({ plugins: [...jssPreset().plugins, rtl()] });

const RTL: React.FC = (props: any) => (
  <StylesProvider jss={jss}>{props.children}</StylesProvider>
);

export default RTL;

顺便说一句，我正在使用 TypeScript。我尝试过的事情： 1- 安装 jss-rtl （它不符合预期）。2-添加dir="rtl"到组件中。3-安装 i18next 也没有成功

标签： htmlreactjstypescriptmaterial-ui