I'm currently facing a challenge trying to center-align my react form.
Below is the structure of my form:
The technology I am using is Material UI for ReactJS
<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>
I have been attempting to align the form in the center.
If you need to view the entire component, this is the code snippet containing the form
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;
Could someone assist me in centering this form? I've spent the whole day trying with no success.