使用Material UI实现Grid容器的条件间距设置

实现方案 #

你要的条件设置spacing效果可以通过以下几种方式实现，不需要手动用useState维护isMobile状态：

方案1：使用MUI内置响应式spacing（最推荐）

Material UI的Grid组件原生支持响应式间距配置，直接传入断点对象即可，不需要额外定义变量：

<Grid container className={classes.listProjects} spacing={{ xs: 0, sm: 4 }}>

这里xs对应移动端断点（默认是0~599px），sm对应600px及以上的设备，你可以根据自己的需求调整断点，比如把sm换成md就对应900px及以上用间距4。

方案2：手动判断设备尺寸

如果需要在其他逻辑里复用isMobile状态，可以用MUI提供的useMediaQuery钩子自动监听窗口尺寸：

1. 引入依赖

import { useTheme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';

2. 组件内获取判断结果

const theme = useTheme();
// 小于600px判定为移动端，可自行修改断点值，比如down('768px')
const isMobile = useMediaQuery(theme.breakpoints.down('sm'));

3. 直接用你写的条件写法即可：

<Grid container className={classes.listProjects} spacing={isMobile ? 0 : 4}>

这种方式不需要你手动用useState赋值，useMediaQuery会自动监听窗口缩放，实时返回最新的判断结果。

其他无需修改spacing的解决方案

你遇到的移动端横向滚动问题，本质是Grid container的左右默认padding没有抵消spacing带来的边距溢出，也可以通过CSS直接修复，不用调整间距：
给classes.listProjects加上如下样式：

.listProjects {
  padding-left: 0 !important;
  padding-right: 0 !important;
  /* 如果你不想修改padding，也可以加 overflow-x: hidden; 但要注意不会隐藏必要内容 */
}

内容的提问来源于stack exchange，提问作者Shakeel