html - Deck.gl (Mapbox) StaticMap のサイズが変更されない - 画面上のすべてが上書きされる

Question

基本的なdeck.gl（マップボックスの静的マップ）を反応プロジェクトに追加しようとしています-これは可能です; ただし、マップが読み込まれると、ページ全体が使用され、その他の情報はマップの背後に隠されます。たとえば、地図の<p>上にテキストがあり、そのすぐ上に表示されるはずの地図の後ろに隠れてしまいます。

マップが置かれている div のサイズを変更しようとしても失敗しました: margin-top, height etc..

クラスはDglMapと呼ばれます

class DglMap extends Component {
  render() {
    const layers = [];
    return (
      <div className="dglMapStyle">
        <DeckGL
          initialViewState={initialViewState}
          controller={true}
          layers={layers}
        >
          <StaticMap mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN} />
        </DeckGL>
      </div>
    );
  }
}

Content というクラスに追加された

class Content extends Component {
  state = {};
  render() {
    return (
      <div>
        <BaseMap />
      </div>
    );
  }
}

app.js に追加

function App() {
  return (
    <Router>
      <div>
        <SomeText />
        <Route exact path="/" component={MainContent} />
      </div>
    </Router>
  );
}
export default App;

ファイルSomeTextが返されます<div><p>SomeText</p></div>

期待される結果は、マップがテキストの下に表示され、テキストの上には表示されないことです。別のケースでは、マップのサイズを特定のサイズに変更したい場合があります。たとえば500x500px。

どんな助けでも感謝し、喜んで詳しく説明します。乾杯！