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

【问题标题】：React google-maps-react, Change property of hidden div from google maps apiReact google-maps-react，从 google maps api 更改隐藏 div 的属性
【发布时间】：2018-04-16 19:50:06
【问题描述】：

所以我正在使用 google-maps-react 库渲染一些地图。但是，我遇到了谷歌地图组件产生的最外部 div 的问题。我不希望 div 大于其父 div，但默认设置为 100% 宽度+高度以及绝对位置（因此 oveflow:hidden 不起作用）。它也没有 id 或类名，因此我无法直接获取 div。

下面是我如何在我的一种反应方法的返回语句中使用我的 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 的 sn-p。最外层的div基本是不可见的，我不能改变它的样式属性

如果有人可以帮助我了解如何将该样式属性更改为“位置：相对”，那就太好了！

【问题讨论】：

标签： javascript html css reactjs google-maps

【解决方案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;
}

【讨论】：