Material UI响应式网格方向
Material UI响应式网格方向
提问于 2020-09-28 23:33:15
我希望容器方向在md大小屏幕上为"row“，在md大小屏幕下为"column”？我如何实现它？
<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风格。有没有办法在样式表文件中访问这些react道具？
回答 3
Stack Overflow用户
回答已采纳
发布于 2020-09-28 23:50:53
您可以使用useMediaQuery
import useMediaQuery from '@material-ui/core/useMediaQuery';
const largeScreen = useMediaQuery(theme => theme.breakpoints.up('md'));
<Grid container direction={largescreen?"row":"column"}>Stack Overflow用户
发布于 2021-11-22 18:26:37
最简单的方法，也是我认为最现代的方法是使用sx属性。然后让MUI为您处理断点。在编写本文时，这些都是默认的MUI断点。
xs = extra-small: 0px
sm = small: 600px
md = medium: 900px
lg = large: 1200px
xl = extra-large: 1536pxxs和sm通常被认为是移动/小型平板电脑。MUI首先是移动的，所以在下面的例子中，xs将被设置，直到大小为md或更大时才会被覆盖。
<Grid container sx={{ flexDirection: { xs: "column", md: "row"} }}>
</Grid>Stack Overflow用户
发布于 2021-08-13 16:27:26
使用flexDirection而不是方向。
gridDirection: {
flexDirection = "row",
[theme.breakpoints.down('md')]: {
flexDirection = "column",
},
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64105244
复制相关文章
相似问题
腾讯云开发者
