reactjs - react-leaflet 中的搜索框看起来不对

Question

当它应该是您按下以打开的按钮时，它看起来像这样。我正在将 react-leaflet 与 mapzen 的传单地理编码器一起使用。

import { MapControl } from 'react-leaflet'
import L from 'leaflet'
import 'leaflet-geocoder-mapzen'

export default class SearchBox extends MapControl {
  componentWillMount() {
    const searchBox = L.control.geocoder(<API-KEY>)
    this.leafletElement = searchBox
  }
}

Answer 1

我在我的 CSS 中添加了一些样式，使搜索框看起来更好一些——至少现在是我的修复。

.leaflet-touch .leaflet-bar {
  background-color: white;
}

.leaflet-pelias-control, .leaflet-pelias-input {
  width: 100%;
  max-width: 200px;
}

.leaflet-pelias-search-icon {
  display: block;
  visibility: hidden;
}

.leaflet-pelias-close {
  visibility: hidden;
}

.leaflet-pelias-close::after {
  content:'Clear search';
  visibility: visible;
  display: block;
  width: 100%;
  padding: 5px;
  top: 2px;
}

.leaflet-top, .leaflet-left {
  width: 200px;
}

Answer 2

对于leaflet-control-geocoder，对我有用的是将以下内容添加到index.css：

@import "~leaflet-control-geocoder/dist/Control.Geocoder.css";

所以对于leaflet-geocoder-mapzen我猜（未经测试）：

@import "~leaflet-geocoder-mapzen/1.9.4/leaflet-geocoder-mapzen.css";

或类似的

供参考

波浪号 (~) 与 webpack 一起使用意味着对 node_modules 执行查找以解析路径。在这里查看stackoverflow解释