How to give space in between the fields in material UI?

Question

I'm new to material UI, My objective is to gives spaces in between every text fields, i've given spacing but it is not working. Can anyone assist me in giving space in between textfields?

Here is the code:

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"

Answer 1

Some notice points

• direction set to column
• parent Grid set as container
• add distance using 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>

---

---

If you look at the dom structure in a browser developer mode, you would find out that the space is settled. And the spaces are equal between each field, the reason why it shows different is that there are outer elements.

Try it online:

---

Related QA: How to have different horizontal and vertical spacing in ReactJs Material UI Grid