I just started using material UI and I'm trying to add spacing between my text fields. I've tried adding the spacing but it doesn't seem to be working. Can someone help me figure out how to add space in between textfields?
Below is the code snippet:
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);