使用 Material UI，如何在小断点中删除 Grid 项上的间距？

Question

我有一个使用5. 我希望该间距不会发生在xs断点处。如何在xs断点处删除它？

你可以在这里看到一个演示：https : //stackblitz.com/edit/hfkmxi?file=demo.js

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
  },
  paper: {
    height: 140,
    width: 100,
  },
}));

export default function SpacingGrid() {
  const classes = useStyles();

  return (
    <Grid container justify="center" spacing={5}>
      <Grid item>
        <Paper className={classes.paper} />
      </Grid>
      <Grid item>
        <Paper className={classes.paper} />
      </Grid>
      <Grid item>
        <Paper className={classes.paper} />
      </Grid>
    </Grid>
  );
}

Answer 1

Grid的spacing属性可以接受一个数字和一个对象来描述应该在不同的断点上设置什么值：

一个应用于所有断点的简单数字：

<Grid container spacing={3}

基于断点的响应值，更多详细信息请参见此处：

<Grid
  container
  spacing={{
    xs: 0,
    sm: 2,
    md: 5
  }}
>

现场演示

Answer 2

我认为 useMediaQuery 挂钩与主题断点相结合正是您所需要的。

import { useTheme } from '@material-ui/core/styles';
import useMediaQuery from '@material-ui/core/useMediaQuery';

function MyComponent() {
  const theme = useTheme();
  const isSmall = useMediaQuery(theme.breakpoints.down('sm'));

  return <Grid spacing={isSmall ? 0 : 2}> ... ;
}

请参阅useMediaQuery-css 媒体查询挂钩。

Answer 3

我能够使用这个 CSS 技巧让它工作，但我希望只使用 props 的解决方案。

const pageStyles = theme => ({
  leftColumn: {
    [theme.breakpoints.down('sm')]: {
      margin: 0,
      '& > .MuiGrid-item': {
        padding: 0,
      },
    },
  }
});

<Grid
  item
  container
  spacing={5}
  classes={{
    root: classes.leftColumn,
  }}
>
 ...
</Grid>