reactjs - Material 用户界面 : How can I remove spacing on Grid item in small breakpoint?

Question

我有一个基本的网格，间距为5。我希望在 xs 断点处不出现这种间距。如何在 xs 断点处删除它？

您可以查看演示 here .

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

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

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 media query hook .