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

Question

所以我正在使用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'，那就太好了！

Answer 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;
}