How to Give Space in Between the Fields in Material UI

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

This Post Has One Comment

  1. No Fault

    Some notice points

    direction set to column
    parent Grid set as container
    add distance using spacing

    enter image description here

    If you look at the doom 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.

Leave a Reply