我正在使用MUI v5 + React + Typescript。
当我使用网格系统时,我定义了一些选项,如xs sm md lg
等,用于设置项目的宽度等。如果我只设置xs
或sm
,效果会很好。但如果我设置了md
,当我使用DevTool设备工具栏并设置一些移动响应时,md
下的其他选项(如xs sm
)不起作用。但是如果我没有使用DevTool,只是改变了一下Chrome的窗口大小,那就没问题了。它也不能在iOS和安卓手机上工作。
同样,当我使用useMediaQuery的时候,比如useMediaQuery('(max-width:576px)')
,它也不能工作。如果我设置了max-width:960
(md
属性),它可以正常工作。
当我创建一个空的MIU5 React TS项目,并使用这个网格系统,它的工作正常。
怎样才能发现我的项目出了什么问题?https://i.stack.imgur.com/7QifT.jpg
示例代码如下:
root: {
flexGrow: 1
},
<Grid
container
direction="row"
justifyContent="space-between"
className={classes.root}>
<Grid item md={6} sm={6} xs={6} lg={6}>
some inner code
</Grid>
<Grid item md={5} sm={6} xs={5} lg={4}>
inner code
</Grid>
</Grid>
发布于 2021-09-18 15:40:08
我不知道它是如何工作的,但在构建应用程序之后,这个问题就解决了。
https://stackoverflow.com/questions/69230362
复制相似问题