html - 网格元素高度不匹配响应方形 child

Question

我正在使用 React 和 Material-ui 创建一个网络应用程序。我需要一个 map 组件的响应式方形 div，但是，使用 a trick from iamsteve.me破坏了网格布局，因为父网格 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 方 block ，你应该使用 Grid由 Material-UI 提供。

使用 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"
  },

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

希望对您有所帮助。谢谢