材质UI中的<Grid>-缩小屏幕尺寸时，项目向右重叠->不使用左侧

Question

<Card className={classes.cardLevel}>
  <Grid container spacing={2}>
    <Grid item xs={12} sm={6} align="center">
      <Paper className={classes.gridItem}>Grid Item</Paper>
    </Grid>
    <Grid item xs={12} sm={6} align="center">
      <Paper className={classes.gridItem}>Grid Item</Paper>
    </Grid>
  </Grid>
</Card>

const useStyles = makeStyles({
  cardLevel: {
    border: "2px solid black",
    boxSizing: "border-box",
    width: "50%",
    padding: 20,
  },
  gridItem: {
    width: 200,
  },
});

在卡片组件内（带有：“边框” +填充+边框），有一个网格容器。 在网格容器内部有网格项目（带有：align =“ center” and interval = {2}）。 在每个网格项目中都有一个“纸张组件”（宽度：200像素）。

当我充分减小屏幕宽度时，两个纸张组件都开始“吃掉”它们的右侧 （例如，网格之间的间距+ Card的右填充）。 -好的。

当进一步减小屏幕宽度时，纸张组件继续在其右侧重叠，而从Card左移的原始填充仍未被触及。

如何做到这一点，当充分减小屏幕宽度时，在纸张组件开始向右重叠之前，他们应该先“吃掉” Card左侧的填充物？

Answer 1

我发现的唯一解决方案是覆盖主题中的断点，因此它们会更早执行断点并且不会相互接触

export const defaultTheme = createMuiTheme({
  breakpoints: {
    values: {
      xs: 240,
      sm: 900,
      md: 1060,
      lg: 1660,
      xl: 1920,
    }
  }
});

类似的东西。