reactjs - Material 用户界面 : deck gl covers grid

Question

我正在使用 React 和 Material-UI。我想把代码分成两列。其中之一，我想使用 deck.gl 渲染 map 。显然，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;

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

9试试这个。

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