如何在 Material UI Grid 中设置自定义间距边距值

Question

我需要在 Material UI 中的 Grid 项目之间设置特定的间距值。 下面是我的代码：

<Grid container spacing={1}>
    <Grid item xs={6}>Node 1</Grid>
    <Grid item xs={6}>Node 2</Grid>
    ...etc
</Grid>

问题是我设置spacing={1} 时的边距比我想要的要大一点。如何为项目之间的边距设置自定义值？

Answer 1

您可以使用自定义类并添加到您的网格中，例如：

grid: {
   margin: '5px'
}

<Grid className={classes.grid}>
   ....
</Grid>

Answer 2

通过使用 MUI 的 makeStyles() 添加样式和类名

或许这样你就可以做到：

import React from "react";
import { Grid, makeStyles } from "@material-ui/core";
function GridT() {
  const useStyles = makeStyles((theme) => ({
    gridItem: {
      padding: theme.spacing(0.5),
    }
  }));

  const styles = useStyles();

  return (
    <Grid container>
      <Grid className={styles.gridItem} item xs={6}>
        Node 1
      </Grid>
      <Grid className={styles.gridItem} item xs={6}>
        Node 2
      </Grid>
    </Grid>
  );
}

export default GridT;

代码沙盒示例：https://codesandbox.io/s/charming-architecture-qt5p5