reactjs - 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",
    },
  }

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

Answer 1

您可以使用 useMediaQuery

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

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

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