MUI：如何删除小断点中网格项目的间距？

Question

我有一个使用5间距的基Grid 。 我希望该间距不要发生在xs断点处。 如何在xs断点上删除它？

你可以在这里看到一个演示。

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 挂钩与主题断点相结合正是您所需要的。

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 2

我能够使用这个 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>

Answer 3

用于移动/小屏幕尺寸的媒体查询

@media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }

从您的控制台中找到该类，并通过删除间距或使边距将其添加到上述媒体查询中：0

Answer 4

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

适用于所有断点的简单数字：

<Grid container spacing={3}

基于断点的响应值，这里有更多详细信息：

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

现场演示

Answer 5

我在 MUI5 中有自己的组件并且工作得非常好！

import {Box as MUIBox, BoxProps, styled} from "@mui/system";

export interface ResponsiveBoxPaddingProps extends BoxProps {
    pXs?: number,
    pSm?: number,
    pMd?: number,
    pLg?: number,
    pXl?: number,
    myXs?: number,
    mySm?: number,
    myMd?: number,
    myXl?: number,
    myLg?: number,
    mtXs?: number,
    mtSm?: number,
    mtMd?: number,
    mtXl?: number,
    mtLg?: number,
}

export const Box = styled(MUIBox,
    {
        shouldForwardProp: (prop) =>
            prop !== 'pXs' && prop !== 'pSm' && prop !== 'pMd' && prop !== 'pLg' && prop !== 'pXl' &&
            prop !== 'myXs' && prop !== 'mySm' && prop !== 'myMd' && prop !== 'myLg' && prop !== 'myXl' &&
            prop !== 'mtXs' && prop !== 'mtSm' && prop !== 'mtMd' && prop !== 'mtLg' && prop !== 'mtXl',
    })<ResponsiveBoxPaddingProps>(({ pXs, pMd, pSm, pXl, pLg, myXs, myMd, mySm, myXl, myLg, mtLg, mtSm, mtXs, mtMd, mtXl,  theme}) => ({
    padding: pXs,
    margin: myXs && `${theme.spacing(myXs ?? 0)} 0`,
    marginTop: mtXs && theme.spacing(mtXs ?? 0),
    [theme.breakpoints.down("sm")]: {
        padding: pSm,
        margin: mySm && `${theme.spacing(mySm ?? 0)} 0`,
        marginTop: mtSm && theme.spacing(mtSm ?? 0),
    },
    [theme.breakpoints.down("md")]: {
        padding: pMd,
        margin: myMd && `${theme.spacing(myMd ?? 0)} 0`,
        marginTop: mtMd && theme.spacing(mtMd ?? 0),
    },
    [theme.breakpoints.down("xl")]: {
        padding: pXl,
        margin: myXl && `${theme.spacing(myXl ?? 0)} 0`,
        marginTop: mtXl && theme.spacing(mtXl ?? 0),

    },
    [theme.breakpoints.down("lg")]: {
        padding: pLg,
        margin: myLg && `${theme.spacing(myLg ?? 0)} 0`,
        marginTop: mtLg && theme.spacing(mtLg ?? 0),

    },
}))

使用示例：

 <Box mt={12} mtSm={8} />

定制吧！ 并非所有用例都经过编码！ 希望能帮助别人！