我想在 Material-UI 的兩個 TextField 上添加一點間隙

Question

這是我的 js 文件，我想在它們之間添加一點間隙，例如填充。 許多人使用 box 屬性來聲明邊距和填充，但我不知道為什么我不能完美地使用 box 屬性。 如果我使用像 ml={1} 這樣的框屬性，那么 TextField 是顛倒的。 不要忘記最重要的部分是我想在 class 組件上使用它，而不是在功能組件上。

<Grid item
      xs={12}
      sm={6}
      md={6}
      lg={6}
      xl={6}>
           <TextField label="Name"
                      variant="outlined"
                      color="primary"
                      size="small"
                      autoFocus />

           <TextField label="Address"
                      variant="outlined"
                      color="primary"
                      size="small"
                      multiline
                      rowsMax={1} />            
 </Grid>

Answer 1

確保您的 Grid 項目屬性位於 Grid 容器中。您必須將 Grid 項目屬性包裝在 Grid Container 屬性中。

Answer 2

解決方法之一是使用 makeStyles。 我已經給出了完整的代碼。 請查閱。 我提到了Material UI: Use theme in React Class Component sample for Class Component。

使用 Function 組件的完整代碼：

import './App.css';
import React from 'react';
import Grid from '@material-ui/core/Grid';
import { TextField } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
  control: {
    padding: theme.spacing(2),
  },
}));

const App = () => {

  const classes = useStyles();

  return (
    <div className="App">
      <h1>Hello MERN !!</h1>

      <br />

      <Grid item xs={12} sm={6} md={6} lg={6} xl={6}>
        <TextField label="Name"
          className={classes.control}
          variant="outlined"
          color="primary"
          size="small"
          autoFocus />

        <TextField label="Address"
          variant="outlined"
          className={classes.control}
          color="primary"
          size="small"
          multiline
          rowsMax={1} />
      </Grid>
    </div >
  );
}

export default App;

使用 Class 組件的完整代碼：

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

const styles = theme => ({
    root: {
        padding: theme.spacing(2),
    }
});

class Car extends React.Component {

    render() {
        const { classes } = this.props;

        return (
            <>
                <Grid item xs={12} sm={6} md={6} lg={6} xl={6}>
                    <TextField label="Name"
                        variant="outlined"
                        className={classes.root}
                        spacing={3}
                        color="primary"
                        size="small"
                        autoFocus />

                    <TextField label="Address"
                        variant="outlined"
                        className={classes.root}
                        spacing={3}
                        color="primary"
                        size="small"
                        multiline
                        rowsMax={1} />
                </Grid>
            </>
        );
    }
}

export default withStyles(styles, { withTheme: true })(Car);