MUI Grid组件display属性失效，需在xs/sm屏幕下隐藏组件

你的问题出在两个关键点：一是同时给Grid设置了xs/sm列宽属性，这些属性生成的布局样式会和display属性产生优先级冲突；二是没有利用MUI专门提供的响应式隐藏方案，手动写display容易踩样式优先级的坑。

下面给出两种可行的解决方案：

方案1：使用MUI的hidden属性（推荐） #

MUI的Grid组件内置了hidden属性，通过断点范围可以快速控制组件在不同屏幕下的显示状态。要隐藏xs和sm尺寸的屏幕（宽度<900px），只需添加hidden smDown即可：

<Grid container item className={classes.mainGrid}>
  <Grid
    item
    md={6}
    className={classes.firstgrid}
    hidden smDown
  >
    <Paper elevation={6} className={classes.firstpaperSignin}>Sign in</Paper>
  </Grid>
</Grid>

• smDown表示覆盖sm及更小的断点（包含xs和sm），完全匹配你需要隐藏的屏幕尺寸；
• 无需设置xs/sm的列宽，因为这些尺寸下组件已经隐藏，列宽属性没有实际意义。

方案2：修正display属性的写法 #

如果你坚持使用display属性，需要先去掉xs/sm的列宽设置以避免样式冲突，同时明确指定sm尺寸下的display值：

<Grid container item className={classes.mainGrid}>
  <Box
    component={Grid}
    item
    md={6}
    className={classes.firstgrid}
    display={{ xs: "none", sm: "none", md: "block" }}
  >
    <Paper elevation={6} className={classes.firstpaperSignin}>Sign in</Paper>
  </Box>
</Grid>

也可以用更简洁的断点范围写法：

display={{ smDown: "none", mdUp: "block" }}

内容的提问来源于stack exchange，提问作者Aswanth Raveendran EK