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

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

test a;
a.setx(10);
a.show();
test b = a;
b.show();
test c = a;
c.show();

请参见useMediaQuery - css media query hook。

Answer 2

针对移动/小屏幕使用的媒体查询

Where-Object

从控制台中找到该类，然后通过删除间距或在 margin：0

中将其添加到上述媒体查询中

Answer 3

我能够使用此CSS黑客工具使其正常工作，但是我希望仅使用道具来解决。

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

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

使用Material UI，如何在较小的断点处删除网格项目上的间距？

3 个答案: