Почему мой код не расположен вертикально в Grid?
Я разрабатываю, используя React и MaterialUI. Я столкнулся со странной проблемой, когда элементы не выравнивались по вертикали. Обычно я работаю над бэкендом, поэтому у меня почти нет знаний о фронтенд-разработке, особенно о Grids. В чем может быть причина, по которой следующий код не выравнивает элементы по вертикали?
<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>
Я хочу расположить панели ввода адресов электронной почты и паролей вертикально.
Спасибо за комментарий к моему вопросу! Вы имеете в виду, что не можете понять, в чем проблема только с моим кодом?
Нам нужен скомпилированный HTML/CSS, который показывает проблему. Кода React недостаточно.
Как предоставить скомпилированный HTML/CSS? Я пытался получить HTML/CSS в инструментах разработчика в локальной среде, но это слишком долго. Хотелось бы узнать конкретный метод.
Ответы 1
Глядя на ваш код, вы видите, что именно компонент Box не позволяет вам складывать элементы вертикально.
Если вы готовы использовать гибкую модель вместо системы сетки, вы можете реализовать ее для вертикального стека, например, так:
<Box
component = "form"
sx = {{
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
"& > :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 = {"password"}
endAdornment = {
<InputAdornment position = "end">
<IconButton
aria-label = "toggle password visibility"
></IconButton>
</InputAdornment>
}
/>
</FormControl>
</Box>
Спасибо за ответ на мой вопрос! Ваш ответ решит мою проблему. Я хотел бы задать дополнительный вопрос: можно ли это когда-нибудь сделать с помощью Grid?
Вопросы, требующие помощи по коду, должны включать кратчайший код, необходимый для его воспроизведения, в самом вопросе, желательно в фрагменте стека с использованием значка
<>. См. Как создать минимальный воспроизводимый пример.