Material UI 响应式网格方向

Question

我希望容器方向为 md 尺寸屏幕上方的“行”和 md 尺寸屏幕下方的“列”？我该如何实施？

<Grid container direction = "row"(in large screens)/direction = "column"(in small screens)>

我尝试过这个。

<Grid container classes={gridDirection}>

 gridDirection: {
    direction = "row",
    [theme.breakpoints.down('md')]: {
      direction = "column",
    },
  }

但它不起作用可能是因为“direction”是一个react prop而不是CSS样式。有没有办法访问样式表文件中的这些反应道具？

Answer 1

最简单的方法，我相信最现代的方法是使用 sx 属性。然后让 MUI 为您处理断点。这些是撰写本文时的默认 MUI 断点。

xs = extra-small: 0px
sm = small: 600px
md = medium: 900px
lg = large: 1200px
xl = extra-large: 1536px

xs和sm通常被认为是移动/小型平板电脑。MUI 是移动优先的，因此 xs 将被设置并且不会被覆盖，直到大小为 md 或更大（在下面的示例中）。

<Grid container sx={{ flexDirection: { xs: "column", md: "row"} }}>

</Grid>

Answer 2

在 MUI v5 中你可以像下面这样做：

<Grid container direction={{xs: "column", md: "row"}}>

</Grid>

Answer 3

您可以使用 useMediaQuery

import useMediaQuery from '@material-ui/core/useMediaQuery';

const largeScreen = useMediaQuery(theme => theme.breakpoints.up('md'));

<Grid container direction={largescreen?"row":"column"}>