Material UI 响应式网格方向答案

【问题标题】：Material UI responsive grid directionMaterial UI 响应式网格方向
【发布时间】：2021-01-14 05:12:32
【问题描述】：

我希望容器方向为 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",
    },
  }

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

【问题讨论】：

标签： reactjs responsive-design material-ui

【解决方案1】：

你可以使用 useMediaQuery

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

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

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

【讨论】：

【解决方案2】：

最简单的方法，我相信现代方法是使用 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>

【讨论】：

【解决方案3】：

使用 flexDirection 代替方向。

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

【讨论】：

【解决方案4】：

至少截至本文回答之日，Material UI 支持带有组件的direction 或flexDirection 属性，这些属性支持基于传递给它的断点映射对象的响应值。

例如，在您的情况下，如果在大屏幕上需要 direction="row" 而在小屏幕上需要 direction="column"，则可以将 prop 传递为： direction={{xs:'row', lg:'column'}}，因此让 MUI prop 使用 Grid 元素处理它：

<Grid container direction={{xs:'row', lg:'column'}}> ... </Grid>

在我看来，对于这种情况，这是在代码中使用它的正确样式，尽管此处的其他替代答案也很有效。

【讨论】：