Mapbox 地理编码器上的 CSS答案

【问题标题】：CSS on Mapbox GeocoderMapbox 地理编码器上的 CSS
【发布时间】：2020-08-07 23:47:18
【问题描述】：

我有一个关于添加 CSS 的问题，因为我找不到与此相关的任何其他问题。我正在尝试将地理编码器搜索移到地图下方，而不是它位于“右上角”的位置，并且无论我使用内联 CSS 还是内部 CSS，我都无法更改它的位置：

import React from "react";
import "mapbox-gl/dist/mapbox-gl.css";
import "react-map-gl-geocoder/dist/mapbox-gl-geocoder.css";
import Geocoder from "react-map-gl-geocoder";
const geostyle {
    margin: '20px';
}

const Map = () = > {`
...
return(
<div>
...
<Geocoder
    style={geostyle}
    mapRef={myMap}
    onViewportChange={setViewport}
    mapboxApiAccessToken={MAPBOX_TOKEN}
    viewport={viewport}
    position="top-left"
  />
...
</div>
);
};

有没有办法自定义 Geocoder 搜索栏？我是否必须编辑从“react-map-gl-geocoder”导入的 mapbox css？谢谢！

【问题讨论】：

标签： reactjs mapbox mapbox-gl react-map-gl

【解决方案1】：

我正在使用 Mapbox GL JS，我正在通过自定义 mapbox CSS 来自定义 mapbox 地理编码器元素。

正如您在此 Mapbox 示例“Place the geocoder input outside the map”中所见，地理编码器的位置通过编辑 Mapbox CSS 进行了更改。

【讨论】：

【解决方案2】：

据我所知，很遗憾，您必须进入从 mapbox 导入的样式并对其进行编辑。我发现这个问题是因为我想看看是否有替代方案，但看起来没有。由于许多原因，为地理编码器设置样式确实令人沮丧。我建议坚持使用香草样式以避免头痛，但如果您必须更改样式，则应复制 /@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css 中的 css，将其粘贴到另一个 css 文件中，然后在那里进行编辑。我知道我迟到了一年，但祝你玩得开心，祝你好运。

【讨论】：