如何将react-map-gl-geocoder位置向右移动

如何解决如何将react-map-gl-geocoder位置向右移动

我在我的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 的属性，它允许您设置地理编码器的样式并放置在您想要的位置

https://www.npmjs.com/package/react-map-gl-geocoder