Question

我正在使用React和Material-UI。我想将代码分为两列。其中之一，我想使用deck.gl渲染地图。显然，deck.gl是全屏显示的，它覆盖了所有屏幕。我什至尝试为DeckGL组件设置属性width = {80}和height = {80}，但是它仍然覆盖了页面的其余部分。

App.js

SELECT 100 * CAST('1.123' AS DECIMAL(16, 10))

Map.js

import React, { Component } from 'react';
import './App.css';
import Grid from '@material-ui/core/Grid';
import Map from './Map.js';

class App extends Component {

  render() {

    return (
      <div >
      <Grid container spacing={24}>
        <Grid item xs={3}>
          Column text
        </Grid>
        <Grid item xs={9}>
          <Map/>
        </Grid>

      </Grid>
      </div>

    );
  }
}

export default App;

Answer 1

9试试这个。

<Grid container spacing={24}>
        <Grid item xs={3}>
          Column text
        </Grid>
        <Grid item xs={3} lg={9}>
          <Map/>
        </Grid>

Answer 2

我遇到了同样的问题，问题是，deck.gl默认情况下为100％宽度，绝对值为100％高度和位置，因此它显示在网格顶部，我所做的工作是我手动覆盖了我的css使用“！important”规则或第二个选项，您可以将deck.gl放在另一个div中，并给该div加上高度，因为deck使用其父代的高度和宽度为100％

Answer 3

我使用react-container-维度解决了这个问题。

        <Grid key={value} item>
          <Paper className={classes.paper}>
            <ContainerDimensions>
              <Map />
            </ContainerDimensions>
          </Paper>
        </Grid

材质用户界面：甲板gl覆盖网格

3 个答案: