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

【问题标题】：<Grid> in Material UI - Items overlap to the right, when reducing the screen-size -> not using the left-sideMaterial UI 中的 <Grid> - 缩小屏幕尺寸时，项目向右重叠 -> 不使用左侧
【发布时间】：2020-09-05 07:08:50
【问题描述】：

<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,
  },
});

在卡片组件内（带有：'border-box' + padding + border）有一个网格容器。在网格容器内有网格项（带有：align="center" 和间距={2}）。每个网格项内部都有一个“纸张组件”（宽度：200px）。

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

当进一步减小屏幕宽度时，纸张组件继续重叠到它们的右侧，而卡片的原始 padding-left 仍然保持不变。

如何做到这一点，当足够减小屏幕宽度时，在纸张组件开始向右重叠之前，他们应该先使用 Card 的 padding-left？

【问题讨论】：

标签： html css reactjs material-ui material-design

【解决方案1】：

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

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

类似的东西。

【讨论】：