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"

@keikai - The space above the first input field is less than the space in between the text fields. How to make it equal? Could you assist me in this? — Sandhya, Mar 21 '20 at 04:49

keikai · Accepted Answer · 2020-03-21T04:53:17.163

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

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

1 Answers1