gpt4 book ai didi

javascript - 如何在 Material UI 中的字段之间留出空间?

转载 作者:行者123 更新时间:2023-12-03 14:29:50 25 4
gpt4 key购买 nike

我是 Material UI 新手,我的目标是在每个文本字段之间留出空格,我已经留出了空格,但它不起作用。谁能帮助我在文本字段之间留出空间?

代码如下:

import React from "react";
import Grid from "@material-ui/core/Grid";
import { makeStyles, withStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";

const styles = theme => ({
root: {
"& > *": {
margin: theme.spacing(1),
width: "25ch"
}
}
});

class TextFields extends React.Component {
render() {
const { classes } = this.props;
return (
<Grid>
<form className={classes.root} noValidate autoComplete="off">
<Grid item spacing={3}>
<TextField label="First Name" variant="outlined" />
</Grid>
<Grid item spacing={3}>
<TextField label="Last Name" variant="outlined" />
</Grid>
<Grid item spacing={3}>
<TextField label="Address" variant="outlined" />
</Grid>
<Grid item spacing={3}>
<TextField label="Email" variant="outlined" />
</Grid>
</form>
</Grid>
);
}
}
export default withStyles(styles)(TextFields);


"https://codesandbox.io/s/material-demo-kcn7d "

最佳答案

一些注意点

  • 方向设置为
  • 父网格设置为容器
  • 使用间距添加距离
<Grid container direction={"column"} spacing={5}>
<Grid item>
<TextField label="First Name" variant="outlined" />
</Grid>
<Grid item>
<TextField label="Last Name" variant="outlined" />
</Grid>
<Grid item>
<TextField label="Address" variant="outlined" />
</Grid>
<Grid item>
<TextField label="Email" variant="outlined" />
</Grid>
</Grid>
<小时/>

enter image description here

<小时/>

如果你在浏览器开发者模式下查看dom结构,你会发现空间已经解决了。而且各个字段之间的空格是相等的,之所以显示不同是因为有外部元素。

在线尝试:

Edit Material demo

<小时/>

相关质量检查:How to have different horizontal and vertical spacing in ReactJs Material UI Grid

关于javascript - 如何在 Material UI 中的字段之间留出空间?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60760224/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com