react-leaflet 隐藏下拉菜单

Question

React-leaflet 当我在顶部引入下拉菜单时，当我将其下拉时它隐藏在地图后面。任何帮助将不胜感激。下面是它在我面前的渲染方式的屏幕截图

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
import 'leaflet/dist/leaflet.css'
const position = [-0.29008, 3.81987]

class App extends Component {

  render() {
    return (
      <div>
<div className='form-row'>
                    <div className='form-group col-md-12'>
                        <Select
                            placeholder='Search a single Fleet'
                            options={[{ value: 'clear', label: 'Clear Search' }, ...options]}
                            key={'show'}
                            onChange={(e) => {
                                if (e.value === 'clear') setTheVehicle(undefined)
                                else setTheVehicle(e.value)
                            }}
                        />
                    </div>
                </div>


        <Map center={position} zoom={13}>
            <TileLayer
                        url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
                        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                    />
          <Marker position={this.state.center}>
            <Popup>
              A pretty CSS3 popup. <br /> Easily customizable.
            </Popup>
          </Marker>
        </Map>
      </div>
    );
  }
}

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);

Answer 1

相当懒惰的回答，但花了我很长时间：首先检查新样式 <div>

<div className='form-row' style={{position: 'relative', z-index: 999}}>
                    <div className='form-group col-md-12'>
                        <Select
                            placeholder='Search a single Fleet'
                            options={[{ value: 'clear', label: 'Clear Search' }, ...options]}
                            key={'show'}
                            onChange={(e) => {
                                if (e.value === 'clear') setTheVehicle(undefined)
                                else setTheVehicle(e.value)
                            }}
                        />
                    </div>
                </div>

react-leaflet 隐藏下拉菜单

react-leaflet hides a drop down menu

openstreetmap

reactjs

react-leaflet