网格项高度与响应式方形子项不匹配

Question

我正在使用 React 和 Material-ui 创建一个 Web 应用程序。我需要一个用于地图组件的响应式方形 div，但是，使用 a trick from iamsteve.me 会破坏网格布局，因为父 Grid div 没有展开。

我尝试将方形的类移动到网格元素，但这没有帮助。

map: {
    height: '100%', width: '100%', position: 'absolute'
},
mapContainer: {
    height: '0',
    paddingBottom: '100%',
    position: 'relative'
},

<Grid item>
  <div className={classes.mapContainer}>
    <Paper className={classes.map}>
    // map
    </Paper>
  </div>
</Grid>

Grid 项的高度与正方形的大小不匹配。这是后续项目的问题。

Answer 1

对于responsive 正方形，您应该使用Material-UI 提供的Grid。

您的代码中使用Grid 的简单更改可能是这样的

<Grid container justify={"center"}>
   <Grid item xs={6}>
      <Paper className={classes.paper}>Your Map Here</Paper>
    </Grid>
</Grid>

要限制包含元素的宽度，您可以这样做

root: {
    flexGrow: 1,
    height: "50vh",
    width: "50vh"
  },

我已经更新了一个 Codesandbox 在https://codesandbox.io/s/material-demo-pjssu 展示它

我希望这会有所帮助。谢谢