ReactJS材质UI对齐表单字段中心

我正在经历一个麻烦，以调整我的反应形式的中心

这是我的表格：

我使用的是reactjs材质UI

 <Grid item xs={12}>
          <Grid item xs={12}>

            <FormGroup noValidate autoComplete="on">
              <TextField
                label="SSN"
                type="number"
                className={classes.textField}
                name='ssn'
              />
            </FormGroup>

          </Grid>
      </Grid>

我正在尝试将窗体与中心对齐

如果要查看整个组件，这是包含表单的组件

import React from 'react';
import TextField from '@material-ui/core/TextField';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import Button from '@material-ui/core/Button';
import useStyles from '../src/styleMaker'
import { connect } from "react-redux";
import { FormGroup } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';


function App(props) {
  const useStyles = makeStyles(theme => ({
    container: {
      display: 'flex',
      flexWrap: 'wrap',
    },
    textField: {
      marginLeft: theme.spacing(1),
      marginRight: theme.spacing(1),
      width: 200,
    },
  }));
  const classes = useStyles();


  return (

    <React.Fragment>
    <div className={classes.container}>

        <Grid item xs={12}>
          <Grid item xs={12}>

            <FormGroup noValidate autoComplete="on">
              <TextField
                label="SSN"
                type="number"
                className={classes.textField}
                name='ssn'
              />
            </FormGroup>

          </Grid>
      </Grid>

    </div>

    </React.Fragment>

  );
}

export default App;

从“React”导入React；
从“@material ui/core/TextField”导入TextField；
从“@material ui/core/Paper”导入纸张；
从“@material ui/core/Grid”导入网格；
从“@material ui/core/Button”导入按钮；
从“../src/styleMaker”导入useStyles
从“react redux”导入{connect}；
从“@material ui/core”导入{FormGroup}；
从'@material ui/core/styles'导入{makeStyles}；
功能应用程序（道具）{
const useStyles=makeStyles（主题=>({
容器：{
显示：“flex”，
flexWrap:“wrap”，
},
文本字段：{
边缘左侧：主题。间距（1），
边缘光：主题。间距（1），
宽度：200，
},
}));
const classes=useStyles（）；
返回(
);
}
导出默认应用程序；

有人能帮我把这张表格填到中心吗？我试了一整天，但都没成功

如果使用使窗体水平居中，请将以下样式添加到

makeStyles

formGroup: {
  alignItems: 'center'
}

并将

formGroup

类名分配给

这里是，在水平和垂直方向上都与中心对齐

<FormGroup className={classes.formGroup} noValidate autoComplete="on">
    <TextField
        label="SSN"
        type="number"
        className={classes.textField}
        name='ssn'
    />
</FormGroup>

container: {
  display: "flex",
  flexWrap: "wrap",
  position: "absolute",
  top: 0,
  left: 0,
  height: "100%",
  width: "100%",
  alignItems: "center"
},