如何在Material UI中为文本字段添加间距？新手遇设置无效问题

Hey there! I see you're new to Material UI and having trouble getting spacing to work for your text fields. Let's break down the issues in your code and fix them up:

Key Issues in Your Current Code #

• Missing container prop on the outer Grid: Material UI's Grid component needs the container prop on the parent element to enable spacing. The spacing prop only functions on container grids, not individual item grids—so adding spacing={3} to each <Grid item> won't have any effect.
• Conflicting spacing styles: Your form's root class adds margin to all child elements, which can clash with Grid's built-in spacing system. We can adjust this to work seamlessly with Grid's layout instead.

Corrected Code #

import React from "react";
import Grid from "@material-ui/core/Grid";
import { withStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";

const styles = theme => ({
  root: {
    // Optional: Adds margin around the entire form for extra padding
    margin: theme.spacing(2),
  },
  textField: {
    width: "25ch" // Move width styling to a dedicated class for text fields
  }
});

class TextFields extends React.Component {
  render() {
    const { classes } = this.props;
    return (
      <Grid container spacing={3} className={classes.root}>
        <form noValidate autoComplete="off">
          <Grid item xs={12}>
            <TextField label="First Name" variant="outlined" className={classes.textField} />
          </Grid>
          <Grid item xs={12}>
            <TextField label="Last Name" variant="outlined" className={classes.textField} />
          </Grid>
          <Grid item xs={12}>
            <TextField label="Address" variant="outlined" className={classes.textField} />
          </Grid>
          <Grid item xs={12}>
            <TextField label="Email" variant="outlined" className={classes.textField} />
          </Grid>
        </form>
      </Grid>
    );
  }
}

export default withStyles(styles)(TextFields);

What Changed? #

1. Added container and spacing={3} to the outer Grid: This tells Material UI to apply consistent spacing between all child Grid items automatically.
2. Moved width styling to a dedicated textField class: This keeps styles focused on the text fields and avoids conflicts with the Grid layout.
3. Removed redundant spacing props from individual Grid items: Since spacing is controlled by the container, these props weren't doing anything.
4. Adjusted the form's root class: Now it adds margin around the entire form instead of every child element, which works better with Grid's spacing system.

If you want text fields to sit side-by-side on larger screens, you can change the xs={12} prop to something like xs={12} sm={6}—this makes each field take full width on mobile and half width on tablets/desktops, while keeping the spacing intact.

内容的提问来源于stack exchange，提问作者Sandhya