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”是一个响应道具而不是CSS样式。有没有办法在样式表文件中访问这些react道具？

Answer 1

您可以使用useMediaQuery

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

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

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

材质UI响应网格方向

1 个答案: