【发布时间】：2021-09-17 23:16:35
【问题描述】：
我正在使用 MUI v5 + React + Typescript。
当我使用网格系统时，我为设置项目的宽度等定义了一些选项，例如 xs sm md lg 等。
如果我只设置xs 或sm，它的效果很好。但是如果我设置md，当我使用 DevTool 设备工具栏并设置一些移动响应时，md 下的其他选项（如xs sm）将不起作用。但是，如果我不使用 DevTool 并且只是更改 Chrome 窗口的大小，它的工作正常。它也不适用于 iOS 和 Android 手机。
当我使用 useMediaQuery 例如useMediaQuery('(max-width:576px)') 时，它也不起作用。如果我设置max-width:960（md 属性）它工作正常。
当我创建一个空的 MIU 5 React TS 项目并使用这个 Grid 系统时，它工作正常。
如何找出我的项目有什么问题？ 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>
【问题讨论】：
-
申请
xs或sm和申请md时能不能加代码。你是应用所有这些还是只应用一个选项？分享代码。 -
A
md覆盖sm和xs如果它将所有这些选项应用于屏幕宽度 -
当它出错时，你在开发者工具的元素 CSS 部分看到了什么？可以加个截图吗？
-
我添加了屏幕。我在 DevTools 中设置了 250 px 的窗口宽度，你可以看到它只定义了最小宽度 600 和 900 px。但在代码中也定义了 xs sm 和 md。
标签： reactjs typescript material-ui css-grid