Recently delving into the realm of React/MUI, I am faced with the challenge of crafting a login form that showcases a table-like structure where labels and TextFields align on the same row. A key requirement is to ensure equal spacing in the label column to adjust for varying label lengths. Presently, my form displays as follows:
https://i.sstatic.net/0qVR8.png
Upon inspection, it's evident that the labels appear top-left justified in contrast to the TextField, accompanied by unwanted space before and after the text field component. How can I eliminate this extraneous spacing and center the labels vertically?
The code snippet for the form template is outlined below:
<form className={classes.formRoot} autoComplete="off">
<Grid direction="row" container className={classes.formRowContainer}>
<Grid item xs={1} className={classes.formItem}>
<label>Student username: </label>
</Grid>
<Grid item xs={4} className={classes.formItem}>
<TextField
variant="outlined"
required
fullWidth
margin="normal"
/>
</Grid>
</Grid>
<Grid direction="row" container className={classes.formRowContainer}>
<Grid item xs={1} className={classes.formItem}>
<label>Password: </label>
</Grid>
<Grid item xs={4} className={classes.formItem}>
<TextField
variant="outlined"
required
fullWidth
margin="normal"
/>
</Grid>
</Grid>
</form>
In addition, here's an insight into the accompanying CSS styles:
const useStyles = makeStyles(theme => ({
formRoot: {
background: 'white',
margin: 10,
padding: 25,
overflowY: 'hidden',
overflowX: 'hidden',
},
formRowContainer: {
width: 'auto',
},
formItem: {
padding: 10,
'& label': {
display: 'flex',
},
},
paddingTop: {
paddingTop: 20,
},
}));