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

【问题标题】：How to move react-map-gl-geocoder position to the right如何将 react-map-gl-geocoder 位置向右移动
【发布时间】：2020-09-16 03:01:29
【问题描述】：

我在我的 Mapbox 地图中使用了 Geocoder 元素 - 特别是 react-map-gl-geocoder。我想将元素向右移动，但似乎无法覆盖赋予它的样式。

在下图中，您可以在左上角看到搜索。我希望能够应用某种值为 50 的左/左边距，以便它位于地图导航按钮旁边。

使用与地理编码器嵌套的 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 reactjs mapbox-gl-js deck.gl geocoder

【解决方案1】：

您可以尝试添加更具体地针对您想要影响的元素的 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;
}

【讨论】：

嗨，我正在使用 React 并导入了组件。我将在哪里覆盖课程？谢谢！
您可以将样式放在项目的主 CSS 文件中（如果有的话），或者只是创建一个新的 style.css 文件，将规则添加到该文件，然后导入新的 CSS组件顶部的文件，例如 import './App.css';.

【解决方案2】：

我找到了解决方案 - 有一个名为 containerRef 的属性，可让您设置地理编码器的样式并将其放置在您想要的位置

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

【讨论】：