Material UI: deck gl covers grid - reactjs

Question

I am working with React and Material-UI. I want to divide the code into two columns. In one of this, I want to render a map using deck.gl.
Apparently, deck.gl is rendered fullscreen and it covers all the screen. I even tried to set the attributes width={80} and height={80} to the DeckGL component but it is still covering the rest of the page.
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;
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;

Answer 1

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

Answer 2

i had the same problem, the problem is that deck.gl by default is 100% width and 100% height and position absolute so it displays on top of your grid, what i did i manually overwrote deck.gl style rules in my css with '!important' rule or the second option you can put deck.gl in another div and give that div with height because deck uses 100% its parent height and width

Answer 3

I use react-container-dimensions to solve this problem.
<Grid key={value} item>
<Paper className={classes.paper}>
<ContainerDimensions>
<Map />
</ContainerDimensions>
</Paper>
</Grid

Answer 4

You just need to give height and width to the div and render that deckGL map into that div. It will show you accordingly. Because deck always follow its parents properties.