Reactjs 材料界面：甲板总图覆盖网格

我正在使用React和materialui。我想把代码分成两列。在其中一个示例中，我希望使用deck.gl渲染贴图。 显然，deck.gl是全屏显示的，它覆盖了所有屏幕。我甚至尝试将属性

width={80}

和

height={80}

设置为DeckGL组件，但它仍然覆盖了页面的其余部分

App.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;

import React，{Component}来自'React'；
导入“/App.css”；
从“@material ui/core/Grid”导入网格；
从“/Map.js”导入地图；
类应用程序扩展组件{
render（）{
返回(
列文本
);
}
}
导出默认应用程序；

Map.js

/// app.js
import React from 'react';
import DeckGL, {PolygonLayer} from 'deck.gl';
import {StaticMap} from 'react-map-gl';

// Set your mapbox access token here
const MAPBOX_ACCESS_TOKEN = 'pk.eyJ1IjoibWZvZ2xpbyIsImEiOiJjamt2N2Z2aWkwNXJxM3BxNXo4Mmt1a3MwIn0.IqS5iv1ZmLht4hm-N0cDYg';

// Initial viewport settings
const initialViewState = {
  longitude: -87.630259,
  latitude: 41.873400,
  zoom: 13,
  pitch: 35,
  bearing: 0
};

// Data to be used by the LineLayer
const data = [{sourcePosition: [-122.41669, 37.7853], targetPosition: [-122.41669, 37.781]}];

class Map extends React.Component {
  
  render() {
    const layers = [
    ];

    return (
      <DeckGL
        initialViewState={initialViewState}
        controller={true}
        layers={layers}
      >
        <StaticMap 
          mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN} 
          />
      </DeckGL>
    );
  }
}

export default Map;

///app.js
从“React”导入React；
从'deck.gl'导入DeckGL，{PolygonLayer}；
从“react map gl”导入{StaticMap}；
//在此处设置mapbox访问令牌
const MAPBOX_ACCESS_TOKEN='pk.eyj1ijoibwz2xpbyisimeioijjamt2n2z2awkwnxjxm3bxnxo4mmt1a3win0.IqS5iv1ZmLht4hm-N0cDYg'；
//初始视口设置
常量initialViewState={
经度：-87.630259，
纬度：41.873400，
缩放：13，
投球：35分，
方位：0
};
//LineLayer要使用的数据
const data=[{sourcePosition:[-122.41669,37.7853]，targetPosition:[-122.41669,37.781]}]；
类映射扩展了React.Component{
render（）{
常数层=[
];
返回(
);
}
}
导出默认地图；

9试试这个

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

列文本

我也遇到了同样的问题，问题是deck.gl默认为100%宽度、100%高度和位置绝对值，因此它显示在网格顶部，我所做的是在css中手动重写deck.gl样式规则，并使用“！“重要”规则或第二个选项您可以将deck.gl放在另一个div中，并为该div指定高度，因为deck 100%使用其父级高度和宽度

我使用react容器尺寸来解决此问题

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

您也可以添加sm={9}，可能会有所帮助。我认为材质ui不是问题所在。如果我不将deck.gl放在网格中，代码就会工作。