Блог

Мне нужно установить определенное значение интервала между элементами сетки в Material UI. Ниже приведен код, который у меня есть:

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

Проблема в том, что поле, когда я устанавливаю spacing={1} , немного больше, чем я хочу. Как я могу установить пользовательское значение для поля между элементами?

Вы можете использовать пользовательский класс и добавить его в свою сетку, например:

 grid: {
   margin: '5px'
}

 

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

Добавив стили и имя класса с помощью makeStyles () MUI

Вероятно, таким образом вы можете это сделать:

 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