As I delve into developing with React and MaterialUI, a perplexing issue has arisen where elements refuse to align vertically. My expertise lies mostly in backend development, leaving me with minimal knowledge of frontend development nuances, especially concerning Grids. What could possibly be causing the lack of vertical alignment in the code snippet below?
<Grid
container
direction="column"
justifyContent="center"
alignItems="center"
>
<Box
component="form"
sx={{ "& > :not(style)": { m: 1, width: "25ch" } }}
noValidate
autoComplete="off"
>
<TextField id="standard-basic" label="Email" variant="standard" />
<FormControl sx={{ m: 1, width: "25ch" }} variant="standard">
<InputLabel htmlFor="standard-adornment-password">
Password
</InputLabel>
<Input
id="standard-adornment-password"
type={showPassword ? "text" : "password"}
endAdornment={
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword}
onMouseDown={handleMouseDownPassword}
>
{showPassword ? <VisibilityOff /> : <Visibility />}
</IconButton>
</InputAdornment>
}
/>
</FormControl>
</Box>
</Grid>
My goal is to neatly arrange the input fields for email addresses and passwords in a vertical layout.