材质 UI：deck gl 覆盖网格答案

【问题标题】：Material UI: deck gl covers grid材质 UI：deck gl 覆盖网格
【发布时间】：2019-08-18 16:54:58
【问题描述】：

我正在使用 React 和 Material-UI。我想将代码分成两列。在其中之一中，我想使用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;

地图.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;

【问题讨论】：

标签： reactjs grid material-ui fullscreen deck.gl

【解决方案1】：

9试试这个。

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

【讨论】：

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

【解决方案2】：

我有同样的问题，问题是deck.gl 默认是100% 宽度和100% 高度和绝对位置，所以它显示在你的网格顶部，我做了什么我手动覆盖了deck.gl 样式规则我的 css 使用 '!important' 规则或第二个选项，您可以将 deck.gl 放在另一个 div 中，并为该 div 指定高度，因为 Deck 使用 100% 的父级高度和宽度

【讨论】：

【解决方案3】：

我使用 react-container-dimensions 来解决这个问题。

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

【讨论】：