问题描述
我在我的MapBox地图中使用了Geocoder元素-特别是react-map-gl-geocoder。 我想将元素向右移动，但似乎无法覆盖赋予它的样式。
在下图中，您可以在左上角看到搜索。我希望能够应用某种值为50的margin-left / left，以便它位于地图导航按钮的旁边。
使用与地理编码器嵌套的className无效。
<Geocoder
mapRef={mapRef}
mapBoxApiAccesstoken={process.env.soME_MAPBox_API_KEY}
onViewportChange={(viewport) => setViewport(viewport)}
transitionDuration={1000}
position="top-left" // To determine set position of geocoder search bar
/>
解决方法
您可以尝试添加一个CSS规则，该规则专门针对您要影响的元素。例如，您要更改的是.mapboxg1-ctrl-top-left，因此您应该尝试使用.mapboxg1-control-container .mapboxg1-ctrl-top-left覆盖它。如果这不起作用，您可以尝试引入!important指令。
// try first
.mapboxg1-control-container .mapboxg1-ctrl-top-left {
left: 50px;
}
// if the above doesnt work,then use !important
.mapboxg1-control-container .mapboxg1-ctrl-top-left {
left: 50px !important;
},
我找到了解决方案 - 有一个名为 containerRef 的属性，它允许您设置地理编码器的样式并放置在您想要的位置