提问者:小点点

React google-maps-react,从google maps api中更改隐藏div的属性


所以我正在使用google-maps-react库呈现一些地图。但是,我对google maps组件产生的最外层的div有一个问题。我不希望div比它的父div大,但默认设置为100%宽度+高度以及位置绝对(所以oveflow:hidden不起作用)。它也没有id或类名,因此我无法直接获取div。

下面是我如何在一个react方法的return语句中使用映射的代码。样式更改对最外的div下面的div产生影响,而不是我需要更改的div。

  <Map google={this.props.google} zoom={14} style={{width:'200px', 
     height:'200px', position:'relative'}}>
              <Marker onClick={this.onMarkerClick}
                    name={'Current location'} />
              <InfoWindow onClose={this.onInfoWindowClose}>
                <div>
                   "test"
                </div>
          </InfoWindow>
   </Map>

下面是由google maps react组件生成的两个最外部的div的片段。最外部的div基本上是不可见的,我不能改变它的样式属性

如果有人能帮助我如何将样式属性更改为'position:relative',那就太好了!


共1个答案

匿名用户

您可以使用此css代码访问内部第一个div

.classname div:first-child{
 position: relative !important;
}

在您的情况下,可以这样使用

<div id="mapBox">
  <Map google={this.props.google} zoom={14} style={{width:'200px', 
     height:'200px', position:'relative'}}>
              <Marker onClick={this.onMarkerClick}
                    name={'Current location'} />
              <InfoWindow onClose={this.onInfoWindowClose}>
                <div>
                   "test"
                </div>
          </InfoWindow>
   </Map> 
</div>

//// css code

#mapBox div:first-child {
    position: relative !important;
    height: 500px !important;
}