I have a code snippet using material-ui that I want to center on the page, but it's not working. Can someone please help me fix this issue? Thank you in advance.
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
const useStyles = makeStyles((theme) => ({
root: {
'& > *': {
margin: theme.spacing(1),
width: '25ch',
display: 'flex',
textAlign : 'center'
},
},
}));
export default function Login() {
const classes = useStyles();
return (
<form className={classes.root} noValidate autoComplete="off">
<TextField id="outlined-basic-user" label="UserName" variant="outlined"/>
<TextField id="outlined-basic-pswd" label="Password" variant="outlined" />
<Button variant="contained" color="primary">
Provider
</Button>
<Button variant="contained" color="primary">
Patient
</Button>
</form>
);
}