反应google-maps-react，从Google Maps api更改隐藏div的属性 [英] React google-maps-react, Change property of hidden div from google maps api

问题描述

所以我正在使用google-maps-react库渲染一些地图.但是，我在使用Google Maps组件产生的最外面的div时遇到问题.我不希望div大于其父div，但默认情况下将其设置为100％的宽度和高度以及绝对位置(因此oveflow:hidden不起作用).它也没有ID或类名，因此我无法直接抓取div.

So I am rendering some maps using the google-maps-react library. However, I am having an issue with the most outter div which the google maps component produces. I don't want the div to be larger than its parent div, but its by default set to 100% width+height as well as position absolute(so oveflow:hidden does not work). It also does not have a id or class name therefor I cannot grab the div directly.

下面是我的React方法之一的return语句中如何包含Map的代码.样式更改对最下面的div的div产生影响，而不是我需要更改的div.

Below is the code to how I have my Map in a return statement for one of my react methods. The style change takes affect for the div BELOW the most outer div, not the one I need to change.

  <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基本是不可见的，我无法更改其样式属性

Below is a snippet of the two most outer divs produced by the google maps react component. The most outer div is basically invisible and I can't change its style properties

如果有人可以帮助我解决如何将样式属性更改为"position:relative"，那就太好了！

If someone can help me out on how to change that style property to 'position:relative' that would be great!

推荐答案

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

you can access inner first div using this css code

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

这篇关于反应google-maps-react，从Google Maps api更改隐藏div的属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！