使用 Material UI 在网格容器中设置条件间距答案

【问题标题】：Setting Conditional Spacing in Grid Container using Material UI使用 Material UI 在网格容器中设置条件间距
【发布时间】：2021-09-23 11:02:56
【问题描述】：

Stackoverflow 和 Github 上都有这个问题的答案，但没有任何帮助。

我正在使用<Grid container className={classes.listProjects} spacing={4}>，这会导致移动视图中出现水平滚动问题。我想要的是：<Grid container className={classes.listProjects} spacing={isMobile ? 0 : 4}> 这将获得条件间距。有人可以回答如何实现它。我什么时候可以设置 isMobile: true ，我应该使用 useState 挂钩吗？但在那 isMobile 到 true 。如果有其他方法？

【问题讨论】：

在这里我找到了答案：stackoverflow.com/questions/44480053/…
"什么时候可以设置 isMobile: true ，我应该使用 useState hook 吗？"。无需重新发明轮子，请参阅responsive-values 部分。

标签： reactjs material-ui

【解决方案1】：

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

const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down("xs"));

<Grid container spacing={isMobile ? 0 : 4}>

import Grid from "@mui/material/Grid";

<Grid container spacing={{ xs: 0, sm: 4 }}>

【讨论】：