Mui 单个组件的条件渲染

Question

我想在xs大小时为MUI容器设置disableGutters。

到目前为止我只能这样做：

<Container disableGutters sx={{ display: { xs: 'block', md: 'none' } }}>
    ...lot of code
</Container>

<Container sx={{ display: { xs: 'none', md: 'block' } }}>
    ...lot of duplicit code
</Container>

但是因为有很多重复代码我对这个解决方案感觉不太好，那么有更好的方法吗？

Answer 1

您可以像这样使用 MUI 断点：

在你的组件中你应该添加：

import { useMediaQuery, useTheme } from "@mui/material";

组件内部：

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

然后：

<Container disableGutters={isExtraSmallSize ? true : false} sx={{ display: { xs: 'block', md: 'none' } }}>
    ...lot of code
</Container>

或者您可以做的是使用

isExtraSmallSize

创建您需要的条件渲染

带有

theme

和

useMediaQuery

的自定义钩子非常有用，我推荐你这样做

Answer 2

接受的答案并不完全正确。

正如文档所述：

可与大多数样式解决方案一起使用的媒体查询字符串，它匹配小于断点键（不包括）给定的屏幕尺寸的屏幕宽度。

独占，因此要匹配

xs

，您需要将

sm

传递给

down()

：

const isXSmallScreen = useMediaQuery(useTheme().breakpoints.down("sm"))