javascript - React google-maps-react，从google maps api更改隐藏div的属性

Question

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

下面是我如何在我的一种 react 方法的返回语句中使用我的 map 的代码。样式更改会影响最外层 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;
}