Material UI 网格在 Chrome DevTools 设备工具栏上不起作用

Question

我正在使用 MUI v5 + React + Typescript。

当我使用网格系统时，我定义了一些选项，例如 xs sm md lg 等，用于设置项目的宽度等。如果我只设置 xs 或 sm，它的效果很好。但是如果我设置 md，当我使用 DevTool 设备工具栏并设置一些移动响应时，md 下的其他选项（例如 xs sm）将不起作用。但是，如果我不使用 DevTool 并且只是更改 Chrome 的 window 的大小，则它的工作正常。它也不适用于 iOS 和 Android 手机。

此外，当我使用 useMediaQuery 时，例如 useMediaQuery('(max-width:576px)') 它也不起作用。如果我设置 max-width:960（md 属性）它的工作正常。

当我创建一个空的 MIU 5 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>

Answer 1

我不知道它是如何工作的，但是在构建应用程序之后问题就消失了。

Material UI 网格在 Chrome DevTools 设备工具栏上不起作用

Material UI Grid do not work on Chrome DevTools Device Toolbar

typescript

reactjs

css-grid

material-ui