Material-UI 组件仅在移动设备上溢出屏幕

Question

编辑：这是唯一有问题的页面。同一网站的其他页面显示正确。

我用 React 和 Material-UI 制作了一个网页。顶部组件是Grid和Container。它在桌面上看起来不错，但在移动设备上......好吧......这是屏幕的一侧：

创建了额外的空间（浅灰色），图片和卡片超出了屏幕最大宽度。标题（蓝色）和背景（浅蓝色）具有正确的宽度（屏幕的宽度）。

我正在使用Grid和Container。

这是包含卡片的根组件：

<Grid

  container

  spacing={0}

  direction="row"

  justify="space-around"

  alignItems="center"

  style={{ minHeight: "20vh" }}

> ....

这是另一个改变宽度的容器：

<Container maxWidth="lg" style={{ marginBottom: "5vh" }}>

  <Paper style={{ padding: 20 }}>

    <Grid

      container

      spacing={0}

      direction="column"

      justify="flex-start"

      alignItems="center"

    > ....

正确显示的标题只是一个AppBar.

顶部溢出的图像返回：

<div className={classes.heroContent}>

  <Container maxWidth="md" align="center">

    <Grid

      container

      direction="column"

      justify="flex-end"

      alignItems="center"

    > ...

是classes.heroContent：

 heroContent: {

    backgroundImage: `url(${grupo})`,

    backgroundSize: "cover",

    backgroundRepeat: "no-repeat",

    backgroundPosition: "center",

    padding: theme.spacing(8, 0, 8),

    minHeight: "20vh",

  }, ...

造成这种溢出的原因可能是什么？我一直在阅读文档，但找不到该错误。

Answer 1

我已经解决了 这里有两个问题。问题一：作为卡片根组件的一个网格组件被指定为container但不是item。问题1说明：由于卡片位于Grid父组件的内部，因此还有一个item. 在我将所有内部Grid至少有一个的组件指定Grid为 a container，并将容器Grid内的所有组件Grid直接或间接指定为父组件，因为item它几乎可以工作。问题2：卡片内的介质尺寸和卡片边距的组合对于屏幕来说太大。解决方案是更改margin和width单位。解释问题2：卡片现在有这个CSS：cards: {&nbsp; &nbsp; margin: "5vw",&nbsp; &nbsp; marginBottom: "0vh",&nbsp; },&nbsp; media: {&nbsp; &nbsp; height: "35vh",&nbsp; &nbsp; width: "45vw",&nbsp; },问题出在单位上。我使用margin: '5vh'的边距是根据 vierport 的高度计算的。在高度大于宽度的视口（移动设备）中，高度的一小部分仍然大于宽度。