加载组件时CSS不显示

Question

我正在使用mapbox，但我的问题是它没有显示应有的地图。

如果我直接在render中加载组件（示例1），则它可以正常工作并完美显示地图，但是如果在更改状态时加载了组件（示例2），则显示效果不佳。

render() {
    return (
        <div className="App">
            <div className="NavBar">
                <NavbarComponent parentNavbar={this.doParentNavbar} />
            </div>
            <div className="Map">
                <MapComponent />
            </div>
      </div>
    );
}

示例2

render() {
    return (
        <div className="App">
            <div className="NavBar">
                <NavbarComponent parentNavbar={this.doParentNavbar} />
            </div>
            <div className="Map">
                { 
                    (this.state.nameMap) ? <MapComponent /> : null
                }
            </div>
      </div>
    );
}

CSS文件：

.NavBar {
  position: relative !important;
  z-index: 9999 !important;
}

.Map {
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
  z-index: -9999 !important;
}

.mapboxgl-canvas {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

Answer 1

对不起，我很愚蠢。...

在App.css中，我忘记了这一点：

body {
   height: 100vh;
   margin: 0;
   padding: 0;
   font-family: sans-serif;
}