我是 Material UI 的新手,我的目標(biāo)是在每個文本字段之間留出空格,我已經(jīng)留出了空格,但它不起作用。誰能幫助我在文本字段之間留出空間?這是代碼: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 ”
1 回答

拉莫斯之舞
TA貢獻(xiàn)1820條經(jīng)驗 獲得超10個贊
一些注意點
方向設(shè)置為
column
父網(wǎng)格設(shè)置為
container
使用添加距離
spacing
<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>
如果你在瀏覽器開發(fā)者模式下查看dom結(jié)構(gòu),你會發(fā)現(xiàn)空間已經(jīng)解決了。并且各個字段之間的空格是相等的,之所以顯示不同是因為有外部元素。
- 1 回答
- 0 關(guān)注
- 114 瀏覽
添加回答
舉報
0/150
提交
取消