Reactjs React组件与Mapbox一起工作不正常

我是React的新手，但由于大学助教的要求，我必须使用它。我必须做一个单页应用程序（SPA），包含各种组件。我使用npx create react app来设置基本项目，因此您有了一个想法，现在看起来是这样的：

“创建新节点”、“创建新线”等每个功能都是一个单独的组件

在我的App.js上，我将每个组件的状态设置为false，只有在单击与该特定组件相关联的子菜单的键时才将其设置为true，从而允许我在侧栏选项之间切换，没有问题，然后在每个组件的状态下，我都有display:false以及以下内容：

组件将更新（下一步）{
if（nextrops.display！==this.props.display）{
this.setState（{display:nextrops.display}）；
}
}

因此，它使显示为真，从而加载组件。一切都很好，只有地图查看器出现了一个问题，即map bymapboxgl全屏显示，覆盖了侧边栏，不允许我在组件之间进行更改。MapViewer组件代码为：

import React，{Component}来自“React”；
从“mapbox gl”导入mapboxgl；
//导入“mapbox gl/dist/mapbox gl.css”
mapboxgl.accessToken=“我的钥匙在这里”；
类MapViewerComp扩展组件{
建造师（道具）{
超级（道具）；
此.state={
经度：-8.562298，
纬度：41.187181，
缩放：12，
显示：假，
};
}
组件将更新（下一步）{
if（nextrops.display！==this.props.display）{
this.setState（{display:nextrops.display}）；
}
}
显示地图=（）=>{
常量映射=新的mapboxgl.map({
容器：“根”，
样式：“mapbox://styles/mapbox/streets-v11",
中心：[this.state.longitude，this.state.lation]，
缩放：this.state.zoom
});
var marker=new mapboxgl.marker（）.setLngLat（[-8.562298,41.187181]）.addTo（map）；
};
render（）{
设pageContent=；
if（this.state.display）{
页面内容=(
);
}
返回{pageContent}；
}
}
导出默认的MapViewerComp；

.css如下所示：

.ant开关手柄{
文本对齐：右对齐；
}
.mapContainer{
位置：绝对位置；
排名：0；
右：0；
左：0；
底部：0；
}

当我单击侧边栏上的“地图查看器”选项（对应于我的（MapViewerComp））时，它会像这样弹出：

因为我对React和frontend还不熟悉，所以我唯一能做的就是强迫它适合我的屏幕，如下所示：

要将此部件添加到此组件的.css中：

.mapboxgl画布{
位置：绝对位置；
左：271px；
顶部：65px；
}

这两个问题是： 第一：如果我像我给你展示的那样强制它达到我想要的大小，现在当我在地图上放大和缩小时，标记会四处移动，并且不会停留在原地。 第二：当我点击侧边栏上的其他选项，在功能之间切换时，它不起作用，它会一直显示地图

src处index.js的代码（带有npx create react app结构）为：

从“React”导入React；
从“react dom”导入react dom；
导入“./index.css”；
从“./components/App/App”导入应用程序；
从“/reportWebVitals”导入reportWebVitals；
ReactDOM.render(

对任何问题的任何修复都将不胜感激。所有其他组件都像一个魔咒一样工作，但地图查看器不是。。。
提前谢谢。
编辑：原来mapbox设置为在应用程序根容器内渲染，这就是为什么它会占用所有可用空间，并且在重新渲染应用程序时不会消失。设置边距会暴露侧边栏并允许与之交互，但不会触发贴图消失

哦，那是因为您复制了
背景色
属性：）我加入它只是为了演示div如何处理这些属性，但是你应该删除它，很抱歉我忘了提到它！我想发生的事情是背景颜色覆盖了贴图，因为它本身就是背景！基本上只需删除这一行：
背景色：#ffbb00；
如果你愿意，我已经更新了演示再次复制粘贴：向
添加背景色只是一种非常常见的方式，可以直观地检查它在一组给定属性下的行为，否则您永远无法确定它占用了多少空间以及它在全局结构中的工作情况，这在处理布局时是很有用的：）你有没有可能为你的项目制作一个.zip文件（先删除node modules文件夹），然后给我发送一个下载链接，比如从GoogleDrive下载？在这一点上，我们只是在猜测，但如果没有源代码，将很难以有意义的方式提供帮助：/我仍然认为这只是一个html/css问题，但提供解决方案可能需要对属性进行一些处理，以了解问题的根源